Gutters

Notice the small gap between every column in the grids from the last two lessons — that gap is called a gutter, and Bootstrap 5 gives you direct control over it with a dedicated set of classes, instead of forcing you to write custom margin/padding overrides.

What Are Gutters?

A gutter is the padding Bootstrap adds inside each column plus a matching negative margin on the row, which together create even horizontal (and, if you opt in, vertical) spacing between columns without changing their declared width. By default every .row already has a gutter of size 3 (1.5rem total, split as 0.75rem padding on each side of a column).

The Gutter Scale: .g-0 Through .g-5

.g-{size} sets the gutter in both directions at once, on a 0–5 scale tied to Bootstrap's spacing scale (0, then roughly 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem):

<div class="row g-4">
  <div class="col-md-4">...</div>
  <div class="col-md-4">...</div>
  <div class="col-md-4">...</div>
</div>

Horizontal-Only and Vertical-Only: .gx-* / .gy-*

When a grid wraps onto multiple lines — like TrailMap's trail-card grid on a phone, where cards stack into several rows — you often want spacing between the wrapped rows too, not just side to side. Combine .gx-* and .gy-* for independent control:

<div class="row gx-3 gy-4">
  <!-- tight horizontal gutter, generous vertical gutter between wrapped rows -->
</div>

Removing Gutters for Edge-to-Edge Cards

Sometimes the default padding is exactly what you don't want — a photo grid looks best when each image touches its neighbors with no gap at all. That's what .g-0 is for. Here's a TrailMap "trail photos" strip using edge-to-edge thumbnails:

<div class="row g-0">
  <div class="col-4">
    <img src="ridge-view.jpg" class="img-fluid" alt="Ridge view">
  </div>
  <div class="col-4">
    <img src="trailhead.jpg" class="img-fluid" alt="Trailhead sign">
  </div>
  <div class="col-4">
    <img src="summit.jpg" class="img-fluid" alt="Summit marker">
  </div>
</div>