Grid System
While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths.
| Bootstrap Grid | Extra small (<576px) | Small (≥576px) | Medium (≥768px) | Large (≥992px) | Extra large (≥1200px) |
|---|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | |||
| Container width | None (auto) | 34rem | 45rem | 60rem | 72.25rem |
| 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 | ||||
| Offsets | Yes | ||||
| Column ordering | Yes | ||||
Grid Examples
.col-xl-4
.col-lg-4
.col-md-4
.col-4
.col-xl-4
.col-lg-4
.col-md-4
.col-4
.col-xl-4
.col-lg-4
.col-md-4
.col-4
.col-12
.col-md-3
.col-lg-3
.col-xl-3
.col-12
.col-md-4
.col-lg-4
.col-xl-4
.col-12
.col-md-5
.col-lg-5
.col-xl-5
.col-md-5
.col-12
.col-lg-5
.col-xl-5
.col-md-3
.col-12
.col-lg-3
.col-xl-3
.col-md-4
.col-12
.col-lg-4
.col-xl-4
.col-xl-4
.col-lg-4
.col-md-12
.col-12
.col-xl-4
.col-lg-4
.col-md-12
.col-12
.col-xl-4
.col-lg-4
.col-md-12
.col-12
.col-lg-12
.col-md-12
.col-12
.col-xl-6
.col-lg-12
.col-md-12
.col-12
.col-xl-6
Responsive Utilities
| Class | Extra small devices Portrait phones (<576px) |
Small devices Landscape phones (≥576px) |
Medium devices Tablets (≥768px) |
Large devices Desktops (≥992px) |
Extra large devices Desktops (≥1200px) |
|---|---|---|---|---|---|
.d-none |
Hidden | Hidden | Hidden | Hidden | Hidden |
.d-sm-none |
Visible | Hidden | Hidden | Hidden | Hidden |
.d-md-none |
Visible | Visible | Hidden | Hidden | Hidden |
.d-lg-none |
Visible | Visible | Visible | Hidden | Hidden |
.d-xl-none |
Visible | Visible | Visible | Visible | Hidden |
.d-flex |
Visible | Visible | Visible | Visible | Visible |
.d-none.d-sm-flex |
Hidden | Visible | Visible | Visible | Visible |
.d-none.d-md-flex |
Hidden | Hidden | Visible | Visible | Visible |
.d-none.d-lg-flex |
Hidden | Hidden | Hidden | Visible | Visible |
.d-none.d-xl-flex |
Hidden | Hidden | Hidden | Hidden | Visible |
Horizontal alignment
Use flexbox alignment utilities to horizontally align columns. Like justify-content-*
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
Offsetting columns
Move columns to the right using .offset-md-* 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
Reordering
Use .flex-unordered .flex-last .flex-first for controlling the visual order of your content.
First, but unordered
Second, but last
Third, but first