Bootstrap Component: Grids

Grids

Shows how boostrap automatically creates equal-width columns for a row, on all devices and screen widths. Use the classes .row and .col.

Live Preview

Row one col 1 of 2

Row one col 2 of 2

Row two col 1 of 3

Row two col 2 of 3

Row two col 3 of 3

<div class="container text-center">
  <div class="row">
    <div class="col bg-primary text-white">
      Row one col 1 of 2
    </div>
    <div class="col bg-secondary text-white">
      Row one col 2 of 2
    </div>
  </div><!--end first row-->
  <div class="row">
    <div class="col bg-secondary text-white">
      Row two col 1 of 3
    </div>
    <div class="col bg-primary text-white">
      Row two col 2 of 3
    </div>
    <div class="col col bg-danger text-white">
      Row two col 3 of 3
    </div>
  </div><!--end second row-->
</div><!--end container-->