Layout
The 12-column grid, visualised
Each coloured box shows the classes on its column. Resize the window to watch the breakpoints change the layout.
Equal columns
Columns without a number share the row evenly.
.col
.col
.col
.col
Fixed spans
Numbers say how many of the 12 tracks a column takes.
.col-8
.col-4
.col-3
.col-6
.col-3
Responsive spans
Stacked on phones, two across on tablets, four across on desktops.
.col-12 .col-md-6 .col-xl-3
.col-12 .col-md-6 .col-xl-3
.col-12 .col-md-6 .col-xl-3
.col-12 .col-md-6 .col-xl-3
Row columns
The row decides how many columns fit per line.
.col
.col
.col
.col
.col
.col
Auto width
An auto column shrinks to its content; the others fill the rest.
.col
.col-auto
.col
Offsets
Push a column to the side without empty markup.
.col-md-4
.col-md-4 .offset-md-4
.col-md-6 .offset-md-3
Order
Change visual order on larger screens only.
.col-md .order-md-3
.col-md .order-md-1
.col-md .order-md-2
Nesting
A row inside a column starts its own 12 tracks.
.col-md-8
.col-6
.col-6
.col-md-4
Gutters
Gutter classes set the space between columns, from none to wide.
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
Alignment
Align columns vertically and distribute them horizontally.
.align-items-center
taller column
centred
.col-4
.col-4