Quick answer: Bootstrap 5’s grid is 12 columns inside a .row, with breakpoint classes that change layout per screen size: <div class="col-12 col-md-6 col-lg-4"> means full-width on phones, half on tablets (≥768px), a third on desktops (≥992px) — one line of classes replacing a stylesheet of media queries. Wrap content in .container → .row → col-* and the responsive behavior is automatic. Setup and CDN first: getting started with Bootstrap 5.
The mobile-first mental model
Class prefixes are minimums, not targets: col-md-6 applies at md and everything wider until overridden. So you design the phone layout with plain col-12, then add overrides as screens grow — never the reverse. The common breakpoints:
| Prefix | Applies at | Typical device |
|---|---|---|
(none) col-N | 0px and up | Phones |
col-sm-N | ≥576px | Large phones |
col-md-N | ≥768px | Tablets |
col-lg-N | ≥992px | Laptops |
col-xl-N | ≥1200px | Desktops |
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">Card 1</div>
<div class="col-12 col-md-6 col-lg-4">Card 2</div>
<div class="col-12 col-md-6 col-lg-4">Card 3</div>
</div>
</div>The five layout moves everyone needs
- Auto columns:
class="col"shares leftover space equally — threecols make equal thirds with zero math. - Offsets:
offset-md-3pushes a column right by 3 grid columns — centering content without wrappers. - Alignment:
align-items-centeron the row vertically centers unequal-height columns;justify-content-centercenters the whole group horizontally. - Gutters:
g-3on the row sets consistent spacing between columns (gx/gy for axis control) — no more negative-margin fighting. - Nesting: a
colcan contain its own.rowfor card-internal grids — the standard card-grid pattern from our cards guide.
Two rules prevent most beginner breakage: columns must be direct children of a .row (padding lives on cols, negative margin on the row — skip a level and spacing collapses), and columns per row should sum to 12 per breakpoint (or rely on col auto-sharing). Compare the Materialize approach in the Materialize grid guide — same 12-column idea, different class grammar. Forms follow this grid too: the field structure from the forms guide slots into col-md-6 pairs for two-column layouts.
For hands-on practice building responsive layouts with review, Ampersand Academy teaches web development one-to-one.
Frequently asked questions
How many columns are in the Bootstrap 5 grid?
Twelve per row. Any combination that sums to 12 fits one line – three col-4, two col-6, six col-2 – and combinations can differ per breakpoint with col-12 col-md-6 style classes.
What does col-md-6 mean for phones?
Nothing directly – md classes start at 768px and stay in force above. On smaller screens the element falls back to the next smaller class, usually col-12 full width. That is the mobile-first rule: small is default, prefixes override upward.
Why are my Bootstrap columns stacking vertically on desktop?
Usually the columns are not direct children of a .row, the breakpoint class targets a size below your viewport, or a typo splits the class string. Check the row wrapper and the smallest class that should apply.
How do I center a column in Bootstrap 5?
Either offset it (offset-md-3 for a col-md-6) or use justify-content-center on the row. For vertical centering inside unequal columns, add align-items-center to the row.
What is the difference between col and col-6?
col-6 fixes the width at half the row; plain col shares remaining space equally among auto columns – three cols make thirds, two make halves, without any numbers. Mix them: col plus col-6 gives a third and two thirds.