--- title: Grid Examples --- ## Grid Examples #### Tree equal columns ```html

One of three columns

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

.col-sm-3

.col-sm-6

.col-sm-3

``` #### Two Unequal Columns ```html

.col-sm-4

.col-sm-8

``` #### Two Columns With Two Nested Columns ```html

.col-sm-8

.col-sm-6

.col-sm-4

``` #### 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](https://getbootstrap.com/docs/4.0/layout/grid/)