Grid
Grid Options
Bootstrap grid system allows 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