Grids The grid system help you organize content into rows and columns for desktop, mobile and tablet.

Basic grids

Below you can see a basic example for setting up different column layouts that will collapse based on viewport width.

Full width row:
.col-md-12
Two equal columns:
.col-md-6
.col-md-6
Three equal columns:
.col-md-4
.col-md-4
.col-md-4
Four equal columns:
.col-md-3
.col-md-3
.col-md-3
.col-md-3
Two columns I:
.col-md-4
.col-md-8
Two columns II:
.col-md-8
.col-md-4
Five columns:
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
Four columns I:
.col-md-2
.col-md-2
.col-md-2
.col-md-6
Four columns II:
.col-md-6
.col-md-2
.col-md-2
.col-md-2

Grid offsets

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3