Grid
Use Bootstrap's powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes
Grid options
Grid system is built with flexbox and is mobile-first. It has 5 breakpoints: sm, md, lg, xl and 2xl. Each breakpoint has 12 columns. You can use up to 12 columns in a row. You can use up to 12 rows in a column.
| Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
Massive ≥1400px |
|
|---|---|---|---|---|---|---|
| Max container width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Class prefix | .col- |
sm:col- |
md:col- |
lg:col- |
xl:col- |
2xl:col- |
| # of columns | 12 | |||||
| Gutter width | 30px (15px on each side of a column) | |||||
| Nestable | Yes | |||||
| Column ordering | Yes | |||||
