Gutters

Notation #

Gutters are the gaps between column content, created by horizontal padding. We set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content. The class names for setting gutters come in the following formats:

• .g-{size} / .g-{breakpoint}-{size} — sets gutters on all four sides
• .gx-{size} / .gx-{breakpoint}-{size} — sets gutters horizontally
• .gy-{size} / .gy-{breakpoint}-{size} — sets gutters vertically

The {breakpoint} can be sm, md, lg, xl, or xxl. If the breakpoint is not provided, the element will be affected on all screen sizes (including on extra small screens). On the other hand, if it is provided, the element will be affected only for that breakpoint and up.

The {size} can be one of the following:

Note that the values for the {size} allow us to match our grid to the padding and margin spacers scale.

Horizontal gutters #

The .gx-* classes can be used to control the horizontal gutter widths. The .container or .container-fluid parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we've increased the padding with .px-4:

<!-- Horizontal gutters -->
<div class="container px-4">
  <div class="row gx-5">
    <div class="col"><div class="...">Column</div></div>
    <div class="col"><div class="...">Column</div></div>
  </div>
</div>

An alternative solution is to add a wrapper around the .row with the .overflow-hidden class:

<!-- Horizontal gutters -->
<div class="container overflow-hidden">
  <div class="row gx-5">
    <div class="col"><div class="...">Column</div></div>
    <div class="col"><div class="...">Column</div></div>
  </div>
</div>

Vertical gutters #

The .gy-* classes can be used to control the vertical gutter widths within a row when columns wrap to new lines. Like the horizontal gutters, the vertical gutters can cause some overflow below the .row at the end of a page. If this occurs, you add a wrapper around .row with the .overflow-hidden class:

<!-- Vertical gutters -->
<div class="container overflow-hidden">
  <div class="row gy-4">
    <div class="col-4"><div class="...">Col-4</div></div>
    <div class="col-4"><div class="...">Col-4</div></div>
    <div class="col-4"><div class="...">Col-4</div></div>
    <div class="col-4"><div class="...">Col-4</div></div>
    <div class="col-4"><div class="...">Col-4</div></div>
    <div class="col-4"><div class="...">Col-4</div></div>
  </div>
</div>

Horizontal and vertical gutters #

Use .g-* classes to control the horizontal and vertical grid gutters. In the example below, we use a smaller gutter width, so there isn't a need for the .overflow-hidden wrapper class.

<!-- Horizontal and vertical gutters -->
<div class="container">
  <div class="row g-3">
    <div class="col-4"><div class="...">Col-4</div></div>
    <div class="col-4"><div class="...">Col-4</div></div>
    <div class="col-4"><div class="...">Col-4</div></div>
    <div class="col-6"><div class="...">Col-6</div></div>
    <div class="col-6"><div class="...">Col-6</div></div>
  </div>
</div>

Row columns gutters #

Gutter classes can also be added to row columns. In the following example, we use responsive row columns and responsive gutter classes.

<!-- Row columns gutters -->
<div class="container">
  <div class="row row-cols-2 row-cols-lg-4 g-3 g-lg-4">
    <div class="col"><div class="...">Column</div></div>
    <div class="col"><div class="...">Column</div></div>
    <div class="col"><div class="...">Column</div></div>
    <div class="col"><div class="...">Column</div></div>
    <div class="col"><div class="...">Column</div></div>
    <div class="col"><div class="...">Column</div></div>
    <div class="col"><div class="...">Column</div></div>
    <div class="col"><div class="...">Column</div></div>
  </div>
</div>

No gutters #

The gutters between columns in our predefined grid classes can be removed with .g-0. This removes the negative margin values from .row and the horizontal padding from all immediate children columns. In practice, here's how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).

<!-- No gutters -->
<div class="row g-0">
  <div class="col-8"><div class="...">Col-8</div></div>
  <div class="col-4"><div class="...">Col-4</div></div>
</div>

Edge-to-edge #

Need an edge-to-edge design? Add .g-0 to the parent .container or .container-fluid.

<!-- Edge-to-edge -->
<div class="container g-0">
  <div class="row g-3">
    <div class="col-4"><div class="...">Col-4</div></div>
    <div class="col-4"><div class="...">Col-4</div></div>
    <div class="col-4"><div class="...">Col-4</div></div>
    <div class="col-6"><div class="...">Col-6</div></div>
    <div class="col-6"><div class="...">Col-6</div></div>
  </div>
</div>