HowToCodePage

The grid system

Containers, rows and columns, the six breakpoints, gutter classes, and the layout recipes that cover most pages.

Containers, rows and columns

npm install bootstrap

# the compiled files you link to
# node_modules/bootstrap/dist/css/bootstrap.min.css
# node_modules/bootstrap/dist/js/bootstrap.bundle.min.js   (Popper included)
<div class="container">
  <div class="row">
    <div class="col">first</div>
    <div class="col">second</div>
    <div class="col">third</div>
  </div>
</div>
  • .container is a centred, fixed max-width that steps up at each breakpoint; .container-fluid is always full width.
  • A row belongs inside a container, and columns belong inside a row: the row's negative margins and the column padding are designed to cancel each other out.
  • Columns without a number split the row evenly, so col three times gives three equal parts.
  • row-cols-3 sets an equal share for every direct child, which saves writing col on each one.
  • Twelve is a convention rather than a limit: col-8 plus col-4 fills one row, and a thirteenth column wraps onto the next line.

Breakpoints and column classes

Class infixApplies fromContainer max-width
(xs)all widths100%
sm576px540px
md768px720px
lg992px960px
xl1200px1140px
xxl1400px1320px
<div class="col-12 col-sm-6 col-lg-4 col-xxl-3">card</div>

<div class="d-sm-none">phones only</div>
<div class="d-none d-md-block">hidden below 768px</div>
<div class="col-md-6 offset-md-3">centred column on medium and up</div>
💡
Bootstrap is mobile first: an unprefixed class applies at every width and a prefixed one applies from that breakpoint upward. Write the small-screen layout first and add a prefix only where the layout has to change.

Layout recipes worth remembering

<div class="row g-3">
  <div class="col-12 col-md-6 col-xl-4">card</div>
  <div class="col-12 col-md-6 col-xl-4">card</div>
  <div class="col-12 col-xl-4">card</div>
</div>

<div class="row align-items-center justify-content-between">
  <div class="col-auto">logo</div>
  <div class="col-auto">actions</div>
</div>

<div class="row">
  <aside class="col-lg-3 d-none d-lg-block">sidebar</aside>
  <main class="col-lg-9">content</main>
</div>
  • g-3 sets both gutters; gx-* and gy-* set one axis, and g-0 removes them.
  • col-auto sizes to its content, which is the right choice for toolbars and inline action groups.
  • offset-md-2 pushes a column, and order-* reorders visually without touching the markup order.
  • align-items-* works on the row because a row is a flex container; justify-content-* distributes the columns.

FAQ

Why are my columns wrapping onto the next line?
Either the numbered widths in one row add up to more than 12, or a row sits directly inside another row without a container. Check both, and remember that any width without a prefix applies at every screen size.
Do I still need jQuery?
No. Bootstrap 5 dropped the jQuery dependency; the interactive components need only the bundle script, which already contains Popper for dropdowns, tooltips and popovers.

Navbar, modal and forms CSS Grid

Last refreshed 2026-09-18.