Bootstrap Tutorial - Bootstrap Grid Column

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.

Let's examine the following markup:

<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.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!--from   ww w. j  a  v a  2 s  .c  o  m-->
</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>

Click to view the demo

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><!--from   w  w w  .  j ava 2 s. c  o  m-->
  <body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col1">
            <h3>Column 1</h3>
            <!-- Nesting Starts  -->
            <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>

Click to view the demo

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><!--   w w w  . jav a  2  s . c o  m-->
  <body>
        <div class="row">
            <div class="col-xs-6 col-xs-offset-3 col1">
                <h1>Hello!</h1>
            </div>
        </div>
  </body>
</html>

Click to view the demo

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><!--from   w  w w . j  a va  2 s  . c o  m-->
  <body>
        <div class="row">
            <div class="col-xs-6 col-xs-offset-3">
                <h1 style='background:#EEE'>Hello!</h1>
            </div>
        </div>
  </body>
</html>

Click to view the demo

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><!--from w w w  .  j  a v a2s  .c  o m-->
  <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>

Click to view the demo

Note

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.