Removing Gutters

Prev Next

Every .row in Bootstrap 4 puts a small gap — a gutter — between its columns by default. Most of the time that's exactly what you want, but sometimes, like a strip of TrailMap trail photos meant to butt up against each other, you need that gap gone.

What Are Gutters?

Bootstrap 4 builds gutters with a matched pair of negative margin on .row and padding on each .col-*. The padding is what actually creates the visible space between adjacent columns' content; the negative margin on the row cancels out that same padding at the row's own left and right edge so the whole grid still lines up with its container.

The .no-gutters Class

Add .no-gutters directly to the .row, and Bootstrap 4 zeroes out both sides of that pairing at once — no negative margin on the row, no padding on any column inside it:

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

All-or-Nothing: Less Granular Than Bootstrap 5

.no-gutters is the only gutter-control class Bootstrap 4 ships — it's a single on/off switch for the entire row, with no way to remove spacing on just one axis or dial it down to a smaller size instead of zero. Bootstrap 5 later replaced this with a full gutter scale (classes like .gx-* for horizontal-only and .gy-* for vertical-only gutters, at several sizes), which is considerably more flexible. In a Bootstrap 4 project, the choice is simply "default gutters" or "no gutters at all" — there's no in-between.

TrailMap Example: Edge-to-Edge Image Cards

A strip of trail photos meant to sit flush against one another, with no visible gap:

<div class="row no-gutters">
  <div class="col-4">
    <img src="blue-ridge.jpg" class="img-fluid" alt="Blue Ridge Loop trailhead">
  </div>
  <div class="col-4">
    <img src="sunset-ridge.jpg" class="img-fluid" alt="Sunset Ridge summit view">
  </div>
  <div class="col-4">
    <img src="cedar-falls.jpg" class="img-fluid" alt="Cedar Falls waterfall">
  </div>
</div>

Note: .no-gutters only removes the row's own gutter spacing — it doesn't remove any margin or padding you've added yourself inside a column's content, so an image with rounded corners or its own border still renders exactly as styled.

When to Reach for .no-gutters

Use it for photo grids, full-bleed card walls, or any layout where the columns are meant to read as one continuous surface rather than separated boxes. For ordinary content grids — like the trail-card listing from earlier lessons — leave the default gutters in place; the breathing room between cards is usually what makes the grid readable in the first place.

Up next: Gutters are just one layout detail — the broader set of flexbox-powered alignment classes is covered in Flexbox Utilities.

Prev Next