Grid Examples – Bootstrap

Grid Examples

Tree equal columns

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent .container.

Three unequale columns

 <div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-6">.col-sm-6</div>
  <div class="col-sm-3">.col-sm-3</div>
</div> 

Two Unequal Columns

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

Two Columns With Two Nested Columns

 <div class="row">
  <div class="col-sm-8">
    .col-sm-8
    <div class="row">
      <div class="col-sm-6">.col-sm-6</div>
      <div class="col-sm-6">.col-sm-6</div>
    </div>
  </div>
  <div class="col-sm-4">.col-sm-4</div>
</div> 

Mixed Mobile and Desktop

“`html
.col-xs-7 .col-sm-6 .col-lg-8 .col-xs-5 .col-sm-6 .col-lg-4 .col-xs-6 .col-sm-8 .col-lg-10 .col-xs-6 .col-sm-4 .col-lg-2

#### Clear Floats

Clear floats (with the `.clearfix` class) at specific breakpoints to prevent strange wrapping with uneven content:

html
Column 1
Resize the browser window to see the effect. Column 2 Column 3 Column 4

#### Offsetting Columns
Move columns to the right using `.col-md-offset-*` classes. These classes increase the left margin of a column by * columns:

html
.col-sm-5 .col-md-6 .col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0

#### Push And Pull - Change Column Ordering
Change the order of the grid columns with `.col-md-push-*` and `.col-md-pull-*` classes:

html
.col-sm-4 .col-sm-push-8 .col-sm-8 .col-sm-pull-4

“`

More Information:

Bootstrap Grid