Grid
Bootstrap
|
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 | 24px (12px on each side of a column) | ||||
| Nestable | Yes | ||||
| Column ordering | Yes | ||||
Grid
Using a single set of grid classes, you can create a default grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any
.col-lg-12
.col-lg-11
.col-lg-01
.col-lg-10
.col-lg-02
.col-lg-09
.col-lg-03
.col-lg-08
.col-lg-04
.col-lg-07
.col-lg-05
.col-lg-06
.col-lg-06
.col-lg-05
.col-lg-07
.col-lg-04
.col-lg-08
.col-lg-03
.col-lg-09
.col-lg-02
.col-lg-10
.col-lg-01
.col-lg-11
