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

This article needs improvement. You can help improve this article. You can also write similar articles and help the community.