Bootstrap 5.3
Layout & Grid
Responsive grid system with containers, rows, columns, offsets, and gutters
Basic Grid
The grid system uses rows and columns to create layouts. Columns are sized from 1 to 12:
Three Equal Columns
col-4
col-4
col-4
Unequal Columns
col-3
col-6
col-3
Two Columns
col-8
col-4
Responsive Grid
Columns can have different sizes at different breakpoints. Resize the browser to see the layout change:
12 / md-6 / lg-4
12 / md-6 / lg-4
12 / md-12 / lg-4
Auto-Sized Columns
Columns without a specified size automatically share available space equally:
auto
auto
auto
Row Columns (4 per row)
1
2
3
4
Column Offsets
Push columns to the right using offsets:
col-4 offset-4
col-3 offset-3
col-3 offset-3
col-6 offset-3
Gutters
Control spacing between columns with gutter classes:
No Gutters (g-0)
col-4
col-4
col-4
Large Gutters (g-5)
col-4
col-4
col-4
Nesting
Columns can be nested by adding rows inside columns:
col-8 (outer)
col-6 (nested)
col-6 (nested)
col-4
← Back to Bootstrap Components
Explore all 10 component categories