Grid System
Bootstrap 5's powerful mobile-first flexbox grid. Use container, row, and column classes to build layouts of all shapes and sizes. Explore breakpoints, auto-layout columns, nesting, offsets, and ordering.
Grid Options
|
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥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 | 1.5rem (24px) — left & right each 12px | |||||
| Custom gutters | Yes — via .g-*, .gx-*, .gy-* |
|||||
| Nestable | Yes | |||||
| Column ordering | Yes — via .order-* |
|||||
Equal Width Columns
Using .col without a number distributes columns equally across the available width.
Mixed Widths
Combine fixed-width and auto-width columns in the same row.
col-4 + col-8Responsive Breakpoints
Columns stack on mobile and expand at defined breakpoints. Resize the window to see them respond.
col-12 col-sm-6 col-lg-4Column Offsets
Use .offset-* to shift columns to the right by a given number of columns.
Column Ordering
Reorder columns visually using .order-* without changing the HTML source order.
order-3
order-2
order-1
Nested Grids
Add a new .row inside a column to nest the grid. The nested row creates a new 12-column grid scoped to its parent column.
Gutter Utilities
Control spacing between columns and rows with .g-*, .gx-* (horizontal), and .gy-* (vertical) classes from 0 to 5.