Grid
Grid Options
Bootstrap grid system allow all six breakpoints, and any breakpoints you can customize.| Extra small 576px |
Small 576px |
Medium 768px |
Large 992px |
Extra large 1200px |
Extra extra large 1400px |
|
|---|---|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||||
| Max container width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Class prefix |
.col-
|
.col-sm-
|
.col-md-
|
.col-lg-
|
.col-xl-
|
.col-xxl-
|
| # of columns | 12 | |||||
| Gutter width | 1.5rem (.75rem on left and right) | |||||
| Nestable | Yes | |||||
| Offsets | Yes | |||||
| Column ordering | Yes | |||||
Grid For Column
col-md-6
col-md-6
col-md-7
col-md-5
col-md-8
col-md-4
col-md-9
col-md-3
col-md-10
col-md-2
col-md-11
col-md-1
col-md-12
Equal-width
col-md-6
col-md-6
col-md-4
col-md-4
col-md-4
Setting one column width
col-md-3
col-md-6
(wider)
col-md-3
col
col-md-5 (wider)
col
Variable width content
col-lg-4
col-md-auto
col-lg-4
col
col-md-auto
col-lg-2
All breakpoints
col
col
col
col
col
col-4
Stacked to horizontal
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
Mix and match
col-sm-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
Nesting
Level 1:
.col-sm-3
Level 2:
.col-8 .col-sm-6
Level 2:
.col-4 .col-sm-6
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
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
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
Margin utilities
.col-md-4
.col-md-4
.ms-auto
.col-md-3
.ms-md-auto
.col-md-3
.ms-md-auto
.col-auto
.me-auto
.col-auto