Twitter Bootstrap Grid System

1. Definition

Boostrap offers responsive and mobile first fluid grids. Bootstrap has set of pre-defined grid sizes for screens and main devices. It will suddenly change the grid size while you resizing the browser width.

Bootstrap grid use 12 columns making for a 940 px wide container without responsive. If responsive feature added, the grid adapts to be 724 px and 1170 px wide based on view port.

Bootstrap provides all the features of grid system such as nesting, offset and source ordering.

Code

<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-4</div>
  <div class="col-md-6">.col-md-4</div>
  <div class="col-md-6">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-3</div>
  <div class="col-md-6">.col-md-3</div>
  <div class="col-md-6">.col-md-3</div>
  <div class="col-md-6">.col-md-3</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-2</div>
  <div class="col-md-6">.col-md-2</div>
  <div class="col-md-6">.col-md-2</div>
  <div class="col-md-6">.col-md-2</div>
  <div class="col-md-6">.col-md-2</div>
  <div class="col-md-6">.col-md-2</div>
</div>
			

Output

2. Features of Grid System

2.1. Offset

We can create extra space between columns in a row using classes like .large-offset-3 and .small-offset-4.

Code

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6</div>
</div>

Output

2.2 Nesting

Bootstrap grid allows nesting your content with default grid. You can create complex grid by using nested grid.

Code

<div class="row">
  <div class="col-sm-8" >8
    <div class="row">
      <div class="col-sm-8">8 Nested
        <div class="row">
          <div class="col-sm-8">8 Nested Again</div>
          <div class="col-sm-4">4</div>
        </div>
      </div>
      <div class="col-sm-4">4</div>
    </div>
  </div>
  <div class="col-sm-4">4</div>
</div>

Output

2.3 Ordering

In source ordering, we can easily change order of grids by using col-md-push-* and col-md-pull-* classes.

Code

<div class="row">
  <div class="col-md-6 col-md-push-6">6 First</div>
  <div class="col-md-6 col-md-pull-6">6 Last</div>
</div>
<div class="row">
  <div class="col-md-8 col-md-push-4">8 First</div>
  <div class="col-md-4 col-md-pull-8">4 last</div>
</div>
<div class="row">
  <div class="col-md-9 col-md-push-3">9 First</div>
  <div class="col-md-3 col-md-pull-9">3 Last</div>
</div>
<div class="row">
  <div class="col-md-4 col-md-push-8">8 First</div>
  <div class="col-md-8 col-md-pull-4">4 last</div>
</div>

Output