German
French
Arabic
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 | Extra Large ≥1400px | |
|---|---|---|---|---|---|---|
Container max-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 | 2rem (1rem on left and right) | |||||
| Custom gutters | Yes | |||||
| Nestable | Yes | |||||
| Column ordering | Yes | |||||
Grid Example
You may use predefined grid classes. Using.col-lg-* you can set the grid system.
col-lg-12
col-lg-11
col-lg-1
col-lg-10
col-lg-2
col-lg-9
col-lg-3
col-lg-8
col-lg-4
col-lg-7
col-lg-5
col-lg-6
col-lg-6
col-lg-5
col-lg-7
col-lg-4
col-lg-8
col-lg-3
col-lg-9
col-lg-2
col-lg-10
col-lg-1
col-lg-11
col-lg-2
col-lg-3
col-lg-4
col-lg-2
col-lg-1