Bootstrap has four types of class prefixes for creating columns for different size displays:
- col-xs for extra small displays (screen width < 768px)
- col-sm for smaller displays (screen width >= 768px)
- col-md for medium displays (screen width >= 992px)
- col-lg for larger displays (screen width >= 1200px)
When we specify the class col-xs-12, it means the element should span all 12 of the available Bootstrap columns on extra small screens.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6">
<h4>Column 1</h4>
</div>
<div class="col-xs-12 col-sm-6">
<h4>Column 2</h4>
</div>
</div>
</div>In this code we have used the class col-xs-12 for an extra small display and class col-sm-6 for a smaller sized display. Hence, each column in an extra small-sized display will occupy all the 12 available Bootstrap columns, which will appear as a stack of columns. Yet on a smaller display, they will occupy only six Bootstrap columns each to achieve a two-column layout.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6">
<h4>Column 1</h4>
</div>
<div class="col-xs-12 col-sm-6">
<h4>Column 2</h4>
</div>
</div>
</div>
</body>
</html>Output:
You can resize your browser windows to see the dynamic changes.
Nesting Columns
We can create a new set of 12 Bootstrap columns within any column in our layout in order to create nested columns.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col1">
<h3>Column 1</h3>
<div class="row">
<div class="col-md-6 col3">
<h3>Column 4</h3>
</div>
<div class="col-md-6 col4">
<h3>Column 5</h3>
</div>
</div>
</div>
<div class="col-md-6 col2">
<h3>Column 2</h3>
</div>
</div>
</div>
</body>
</html>Output:
Offsetting Columns
Offsetting is used to increase the left margin of a column.
For example, if you have a column that should appear after a gap of three Bootstrap columns, you can use the offsetting feature.
Classes that are available for offsetting are:
- col-xs-offset-*
- col-sm-offset-*
- col-md-offset-*
- col-lg-offset-*
Suppose we want to move a column three Bootstrap columns towards the right in extra-small displays, we can use the class “col-xs-offset-3“, for example:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col1">
<h1>Hello World!</h1>
</div>
</div>
</body>
</html>Output:
This code will result in a column that spans to six Bootstrap columns, offset three columns towards the right.
Centering Column
We can use the offsetting to center a column. Just place same amount of column to both sides of the centered Column.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-xs-6 col-xs-offset-3">
<h1 style='background:#EED'>Hello World!</h1>
</div>
</div>
</body>
</html>Output:
Pull left and Pull right
Classes such as col-xs-pull-* and col-xs-push-* are used to move a column towards the left and right respectively by a certain number of columns.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-xs-9 col-xs-push-3">
<h1>col-xs-push-3</h1>
</div>
<div class="col-xs-3 col-xs-pull-9">
<h1>col-xs-pull-9</h1>
</div>
</div>
</body>
</html>Output:
In the code, col-xs-9 column is pushed by three columns so it has moved towards the right. The col-xs-3 column is also pulled by nine columns towards the left. They appear as if they have swapped their original position when viewed on a browser.
There are several variants of push and pull classes as per the screen size:
- col-xs-pull-* and col-xs-push-* for extra smaller screens
- col-sm-pull-* and col-sm-push-* for smaller screens
- col-md-pull-* and col-md-push-* for medium screens
- col-lg-pull-* and col-lg-push-* for larger screens
You can replace * with an integer between one and 12.