Chapter 2 - Bootstrap 3 - layout grid system

Bootstrap layouts works on the layout of grid system. This grid follow the 12 columns row system. It means this is 12 column graph where you can draw your design considering these 12 columns. And in the column you can nest this column grid system. To the better understanding you can see the screens of this tutorial. To achieve our layout design we can merge, split and and use offset for these columns.  Also important thing is the bootstrap work according to the four screen resolution categories. these four screens are large computer screens, medium computer screens, tablets and cell phones.

The resolution for the different screen sizes considers are:

1. Large Devices Desktops - (>=1200px)
2. Medium Devices Desktops - (>=992px)
3. Small Devices Desktops - (>=768px)
4. Extra Small Devices Desktops - (<768px)

To get our different size and positions grids we need to user some standard classes of bootstrap. To merge we user the single div and use the class col-md-* according to need. Actually we don't split in bootstrap just take the more than one column and use the class col-md-* accordingly. And also can user the class row for a div to nest some column divs in the row. Class col-md-offset-* used to offset or spam the columns before the div.


Below is the grid Code for the practice.

<div class="bs-docs-grid">

  <div class="row show-grid">
    <div class="col-md-1">1</div>
    <div class="col-md-1">2</div>
    <div class="col-md-1">3</div>
    <div class="col-md-1">4</div>
    <div class="col-md-1">5</div>
    <div class="col-md-1">6</div>
    <div class="col-md-1">7</div>
    <div class="col-md-1">8</div>
    <div class="col-md-1">9</div>
    <div class="col-md-1">10</div>
    <div class="col-md-1">11</div>
    <div class="col-md-1">12</div>
  </div>

  <div class="row show-grid">
    <div class="col-md-8"><font color="red">Merged 8 Columns</font><br> <font color="green">  Class .col-md-8</font></div>
    <div class="col-md-4"><font color="red">Merged 4 Columns</font><br> <font color="green">  Class .col-md-4</font></div>
  </div>

  <div class="row show-grid">
    <div class="col-md-4"><font color="red">Merged 4 Columns</font> <br><font color="green">  Class .col-md-4</font></div>
    <div class="col-md-4"><font color="red">Merged 4 Columns</font> <br><font color="green">  Class .col-md-4</font></div>
    <div class="col-md-4"><font color="red">Merged 4 Columns</font><br> <font color="green">  Class .col-md-4</font></div>
  </div>

  <div class="row show-grid">
    <div class="col-md-6"><font color="red">Merged 6 Columns</font> <br><font color="green">  Class .col-md-6</font></div>
    <div class="col-md-6"><font color="red">Merged 6 Columns</font> <br><font color="green">  Class .col-md-6</font></div>
  </div>
  
  <div class="row show-grid">
    <div class="col-md-4">
      <font color="red">Merged 4 Columns</font> 
      <br>
      <font color="green"> Class .col-md-4</font>
    </div>
    <div class="col-md-4 col-md-offset-4">
      <font color="blue">Offset 4 Columns</font>
      <br>
      <font color="red"> Merged 4 Columns</font> 
      <br>
      <font color="green"> class .col-md-4 .col-md-offset-4</font>
    </div>
  </div>

  <div class="row show-grid">
    <div class="col-md-3 col-md-offset-3">
      <font color="blue">Offset 3 Columns</font>
      <br>
      <font color="red"> Merged 3 Columns</font> 
      <br>
      <font color="green"> class .col-md-3 .col-md-offset-3</font>
    </div>

    <div class="col-md-3 col-md-offset-3">
      <font color="blue">Offset 3 Columns</font>
      <br>
      <font color="red"> Merged 3 Columns</font> 
      <br>
      <font color="green"> class .col-md-3 .col-md-offset-3</font>
    </div>
  </div>

  <div class="row show-grid">
    <div class="col-md-6 col-md-offset-4">
      <font color="blue">Offset 4 Columns</font>
      <br>
      <font color="red"> Merged 6 Columns</font> 
      <br>
      <font color="green"> class .col-md-6 .col-md-offset-4</font>
    </div>
  </div>
  
</div>