Gutters, Row Columns and Nested Grids

Gutters are the padding between columns that keeps content from touching. Bootstrap 5 made them fully adjustable per axis and per breakpoint, added row-cols-* for grids where every column has the same width, and lets you nest a full 12-column grid inside any column. After this lesson you will know how the gutter mechanism actually works, which is the key to fixing most "why is there horizontal scroll" bugs.

How Gutters Work

Bootstrap does not put margins between columns. Instead:

Each column gets horizontal padding of half the gutter (--bs-gutter-x defaults to 1.5rem, so 0.75rem per side).
The .row gets a negative horizontal margin of the same size so the first and last column line up with the container edge.
The .container provides the same amount of padding, which is why content inside a row aligns with content outside it.

This is why a .row placed directly in <body> without a container creates horizontal overflow: the negative margin has nothing to cancel.

Gutter Classes

| Class | Axis | Example | |---|---|---| | g-{0-5} | Both | g-3 | | gx-{0-5} | Horizontal only | gx-0 removes side padding | | gy-{0-5} | Vertical only | gy-4 adds space when columns wrap | | g-{bp}-{n} | Responsive | g-2 g-lg-4 |

The numbers use the spacing scale: 0 = 0, 1 = 0.25rem, 2 = 0.5rem, 3 = 1rem, 4 = 1.5rem, 5 = 3rem.

html

<div class="row g-0">
  <div class="col-6 bg-primary text-white p-2">No gap</div>
  <div class="col-6 bg-secondary text-white p-2">between us</div>
</div>

<div class="row gy-3">
  <div class="col-12 col-md-4">Wraps on phones with vertical spacing</div>
  <div class="col-12 col-md-4">...</div>
  <div class="col-12 col-md-4">...</div>
</div>

Vertical gutters are implemented with a negative top margin on the row and margin-top on each column, so they only add space where columns actually wrap.

Row Columns

When every column should be the same width, row-cols-* on the row saves you from repeating col-* on each child:

html

<div class="row row-cols-2 row-cols-md-3 row-cols-xl-6 g-3">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
</div>

row-cols-{n} where n is 1 to 6 sets how many columns fit per line.
row-cols-auto sizes each column to its content.
A child can still override with its own col-* class when one item should be wider.

This is the idiomatic way to build product grids and card galleries, and it pairs naturally with .card and h-100 for equal-height cards.

Nesting Grids

Any column can contain a new .row, which gets its own 12 units relative to the parent column's width:

html

<div class="container">
  <div class="row">
    <div class="col-lg-8">
      <h2>Article</h2>
      <div class="row g-3">
        <div class="col-sm-6"><div class="border p-3">Half of the 8</div></div>
        <div class="col-sm-6"><div class="border p-3">Other half</div></div>
      </div>
    </div>
    <aside class="col-lg-4">Sidebar</aside>
  </div>
</div>

Because the inner row uses the same negative margin trick, the nested columns align perfectly with the outer column's padding. Do not add another .container inside a column; nesting rows directly is enough.

Changing the Default Gutter

The gutter is exposed as a CSS variable, so you can change it per row without touching Sass:

css

.row.tight {
  --bs-gutter-x: 0.5rem;
  --bs-gutter-y: 0.5rem;
}

Globally, override $grid-gutter-width in Sass before importing Bootstrap. If you also need more spacing options, extend $spacers, since g-* classes are generated from that map.

Common Mistakes

A .row without a .container. The negative margins overflow the viewport and produce a horizontal scrollbar on phones.
Content directly inside .row. Only .col* elements should be immediate children; other elements skip the padding and misalign.
Using g-0 then adding your own padding. Put padding on an inner element (a card body, for example) rather than fighting the column padding.
Expecting gy-* to work on a single line. Vertical gutters only appear between wrapped lines.

Key Takeaways

Gutters are column padding plus a matching negative row margin; the container's padding cancels the negative margin.
g-*, gx-* and gy-* (0 to 5) adjust both, horizontal or vertical gutters, and they accept breakpoint infixes.
row-cols-{n} on the row gives every child the same width without repeating col-*.
Nest a .row directly inside a column to get a fresh 12-unit grid; never nest a container.
Override --bs-gutter-x per row in CSS or $grid-gutter-width in Sass to change defaults.

Next lesson: Typography and Utility Classes - headings, display sizes, lead text, lists and the text utilities that style everything in between.