Master Bootstrap's powerful 12-column grid system for responsive layouts.
Bootstrap's grid system divides the page into 12 equal columns. You can combine these columns to create any layout.
.row
Defines a horizontal group of columns. Ensures columns line up correctly.
.col
Creates auto-sized columns that share available space equally.
.col creates equal-width columns:
Use .col-{number} for specific widths (out of 12):
.col-6 + .col-6 = 12
.col-4 + .col-4 + .col-4 = 12
.col-3 + .col-6 + .col-3 = 12
Add breakpoint prefixes to make columns respond to screen size:
.col-sm-, .col-md-, .col-lg-,
.col-xl-
.col-12 .col-md-6 .col-lg-3 - Stack on mobile, 2 on
tablet, 4 on desktop
Gutters control the spacing between columns. Use
.g-{0-5}, .gx-{0-5}, or
.gy-{0-5}:
.g-0 - .g-5
All sides
.gx-0 - .gx-5
Horizontal only
.gy-0 - .gy-5
Vertical only
.g-0 - No gutter:
.g-4 - Large gutter:
Apply to .row to align columns vertically:
.align-items-start
.align-items-center
.align-items-end
Apply to .row to align columns horizontally:
.justify-content-start
.justify-content-center
.justify-content-end
.justify-content-between
.justify-content-around
.justify-content-evenly