Grid System
Basic Grid System
One of four columns
One of four columns
One of four columns
One of four columns
One of three columns
One of three columns
One of three columns
One of two columns
One of two columns
|
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|
|---|---|---|---|---|---|
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| # of columns | 12 | ||||
| Gutter width | 30px (15px on each side of a column) | ||||
| Nestable | Yes | ||||
| Column ordering | Yes | ||||
Auto Layout columns
Equal Width
1 of 2
2 of 2
1 of 3
2 of 3
3 of 3
Column
Column
Column
Column
Variable width content
1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3
Setting one column width
1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
Equal-width multi-row
col
col
col
col
Responsive classes
All breakpoints
col
col
col
col
col-8
col-4
Stacked to horizontal
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
Mix and match
.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
Alignment
Vertical alignment
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
Horizontal alignment
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
No Gutters
.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4
Column wrapping
.col-9
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6
Subsequent columns continue along the new line.
Subsequent columns continue along the new line.
Column breaks
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
Reordering
Order classes
First, but unordered
Second, but last
Third, but first
First, but unordered
Second, but unordered
Third, but first
Offsetting columns
Offset classes
.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
Margin utilities
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
.col-auto .mr-auto
.col-auto
Nesting
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6