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.
Table of Contents
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.
Official documentation
For the full reference behind this guide, read the Bootstrap 5.3 grid system documentation. It is the source the details above are drawn from, and the first place to check when an option or attribute name changes.
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.
Last updated on · Written by Dinesh Kumar R
