Grid System
Grid Options
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
|
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 Example
Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-* .col-md-* to your columns. See the example below for a better idea of how it all works.
col-md-12
col-md-11
col-md-1
col-md-10
col-md-2
col-md-9
col-md-3
col-md-8
col-md-4
col-md-7
col-md-5
col-md-6
col-md-6
col-md-5
col-md-7
col-md-4
col-md-8
col-md-3
col-md-9
col-md-2
col-md-10
col-md-1
col-md-11
col-md-2
col-md-3
col-md-4
col-md-2
col-md-1
