---
title: Grid Examples
---
## Grid Examples
#### Tree equal columns
```html
One of three columns
One of three columns
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
```
#### Two Columns With Two Nested Columns
```html
```
#### 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/)