Skip to content

Bootstrap Gutters

Gutters are the built-in spacing between grid columns. This lesson covers the gutter scale and how to control horizontal and vertical spacing independently.

Bootstrap Gutters Overview

By default, Bootstrap rows apply negative margins and columns apply matching padding to create consistent gutters between grid items. Gutter utility classes let you scale that spacing up, down, or remove it entirely using a numeric scale from 0 to 5, matching the standard spacing scale used elsewhere in Bootstrap.

You can control horizontal gutters, vertical gutters, or both independently with gx-*, gy-*, and g-*, which is especially useful for card grids and multi-row layouts where rows need vertical spacing as well as horizontal spacing between columns.

Concept Description Common Usage
g-{n} Sets both horizontal and vertical gutters General grid spacing
gx-{n} Sets only horizontal gutter spacing Adjusting space between columns in a row
gy-{n} Sets only vertical gutter spacing Adjusting space between wrapped rows
g-0 Removes gutters entirely Edge-to-edge column layouts
Responsive gutters Breakpoint-specific gutter classes like g-md-4 Tighter spacing on mobile, wider on desktop

Bootstrap Gutters Example

<div class="row g-0">
  <div class="col-6 bg-primary text-white p-3">No gutter</div>
  <div class="col-6 bg-secondary text-white p-3">No gutter</div>
</div>

<div class="row g-4 mt-3">
  <div class="col-4"><div class="card p-3">Gutter 4</div></div>
  <div class="col-4"><div class="card p-3">Gutter 4</div></div>
  <div class="col-4"><div class="card p-3">Gutter 4</div></div>
</div>

<div class="row gx-2 gy-4">
  <div class="col-6">Tight horizontal, wide vertical</div>
  <div class="col-6">Tight horizontal, wide vertical</div>
</div>

The first row uses g-0 to remove all gutters, producing edge-to-edge columns. The second row applies g-4 for even spacing on both axes, ideal for a card grid. The third row demonstrates independent control, keeping horizontal gutters tight while vertical spacing between wrapped rows stays wide.

Top 10 Bootstrap Gutters Examples

These are the gutter utility patterns you'll use to fine-tune spacing in grid layouts.

# Example Syntax
1 Remove all gutters <div class="row g-0">...</div>
2 Small gutter <div class="row g-2">...</div>
3 Medium gutter <div class="row g-3">...</div>
4 Large gutter <div class="row g-5">...</div>
5 Horizontal gutter only <div class="row gx-4">...</div>
6 Vertical gutter only <div class="row gy-4">...</div>
7 Responsive gutter <div class="row g-2 g-md-4">...</div>
8 No horizontal, wide vertical <div class="row gx-0 gy-3">...</div>
9 Gutter with row-cols grid <div class="row row-cols-3 g-3">...</div>
10 Gutter combined with wrap <div class="row g-3" style="flex-wrap: wrap;">...</div>

Best Practices

  • Use g-* when you want uniform spacing on both axes without extra thinking.
  • Split into gx-* and gy-* when a grid needs different horizontal and vertical rhythm.
  • Match gutter size to visual density: smaller gutters for dense dashboards, larger for marketing grids.
  • Use g-0 intentionally for edge-to-edge designs like image galleries or full-bleed cards.
  • Apply responsive gutter classes so spacing tightens naturally on smaller screens.
  • Remember gutters affect padding on columns, which matters when adding backgrounds or borders.
  • Pair gutters with row-cols utilities for clean, consistent card and thumbnail grids.

Common Mistakes

  • Adding manual margin utilities to columns instead of using the built-in gutter system.
  • Forgetting that removing gutters with g-0 also removes the row's negative margin offset.
  • Not realizing gx-* and gy-* can be combined for independent axis control.
  • Applying gutters inconsistently across similar grids, creating visual misalignment.
  • Overlooking that gutters use padding on columns, which can create unexpected background bleed.
  • Using a very large gutter value on mobile, causing columns to wrap unexpectedly.

Key Takeaways

  • Gutters are the spacing between grid columns, controlled by g-*, gx-*, and gy-* classes.
  • The gutter scale (0 through 5) matches Bootstrap's standard spacing scale.
  • gx-* and gy-* allow independent horizontal and vertical gutter control.
  • Responsive gutter classes adjust spacing per breakpoint.
  • g-0 is the standard way to build edge-to-edge grid layouts.

Pro Tip

For masonry-style card grids that wrap across multiple rows, use gy-4 for consistent vertical rhythm even if your horizontal gutter (gx-*) is smaller.

You now understand how to control grid spacing with gutter utilities. Continue to Bootstrap Breakpoints to see how the grid adapts across screen sizes.