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
“`