Grid System
Powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
Basic Structure
Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive.
Grid System
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
| XS <576px | SM ≥576px | MD ≥768px | LG ≥992px | XL ≥1200px | XXL ≥1400px | |
|---|---|---|---|---|---|---|
| Max container width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Component/props | Col | sm | md | lg | xl | xxl |
| # of columns | 12 | |||||
| Gutter width | 1.5rem (.75rem on left and right) | |||||
| Nestable | Yes | |||||
| Column ordering | Yes | |||||
Tips: Bootstrap v5 added one more grid breakpoint class xxl for ≥1400 breakpoint.
Mix and match
Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
Gutters
Gutters are the gaps between column content, created by horizontal padding and vertical margin. bootstrap set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content.Gutters start at 1.5rem (24px) wide.
Reordering
The Col breakpoint props also have a more complicated object prop form: {span: number, order: number, offset: number} for specifying offsets and ordering effects.
You can use the order property to control the visual order of your content.
Column widths in Row
The Row lets you specify column widths across 6 breakpoint sizes (xs, sm, md, lg, xl and xxl). For every breakpoint, you can specify the amount of columns that will fit next to each other. You can also specify auto to set the columns to their natural widths.