Gutters

Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap grid system.

How they work

  • 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.

  • Gutters start at 1.5rem (24px) wide. This allows us to match our grid to the padding and margin spacers scale.

  • Gutters can be responsively adjusted. Use breakpoint-specific gutter classes to modify horizontal gutters, vertical gutters, and all gutters.

Horizontal gutters

.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:

Gutters - 图1

  1. <div class="container px-4">
  2.   <div class="row gx-5">
  3.     <div class="col">
  4.      <div class="p-3 border bg-light">Custom column padding</div>
  5.     </div>
  6.     <div class="col">
  7.       <div class="p-3 border bg-light">Custom column padding</div>
  8.     </div>
  9.   </div>
  10. </div>

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

Gutters - 图2

  1. <div class="container overflow-hidden">
  2.   <div class="row gx-5">
  3.     <div class="col">
  4.      <div class="p-3 border bg-light">Custom column padding</div>
  5.     </div>
  6.     <div class="col">
  7.       <div class="p-3 border bg-light">Custom column padding</div>
  8.     </div>
  9.   </div>
  10. </div>

Vertical gutters

.gy-* classes can be used to control the vertical gutter widths. 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:

Gutters - 图3

  1. <div class="container overflow-hidden">
  2.   <div class="row gy-5">
  3.     <div class="col-6">
  4.       <div class="p-3 border bg-light">Custom column padding</div>
  5.     </div>
  6.     <div class="col-6">
  7.       <div class="p-3 border bg-light">Custom column padding</div>
  8.     </div>
  9.     <div class="col-6">
  10.       <div class="p-3 border bg-light">Custom column padding</div>
  11.     </div>
  12.     <div class="col-6">
  13.       <div class="p-3 border bg-light">Custom column padding</div>
  14.     </div>
  15.   </div>
  16. </div>

Horizontal & vertical gutters

.g-* classes can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won’t be a need to add the .overflow-hidden wrapper class.

Gutters - 图4

  1. <div class="container">
  2.   <div class="row g-2">
  3.     <div class="col-6">
  4.       <div class="p-3 border bg-light">Custom column padding</div>
  5.     </div>
  6.     <div class="col-6">
  7.       <div class="p-3 border bg-light">Custom column padding</div>
  8.     </div>
  9.     <div class="col-6">
  10.       <div class="p-3 border bg-light">Custom column padding</div>
  11.     </div>
  12.     <div class="col-6">
  13.       <div class="p-3 border bg-light">Custom column padding</div>
  14.     </div>
  15.   </div>
  16. </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.

Gutters - 图5

  1. <div class="container">
  2.   <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
  3.     <div class="col">
  4.       <div class="p-3 border bg-light">Row column</div>
  5.     </div>
  6.     <div class="col">
  7.       <div class="p-3 border bg-light">Row column</div>
  8.     </div>
  9.     <div class="col">
  10.       <div class="p-3 border bg-light">Row column</div>
  11.     </div>
  12.     <div class="col">
  13.       <div class="p-3 border bg-light">Row column</div>
  14.     </div>
  15.     <div class="col">
  16.       <div class="p-3 border bg-light">Row column</div>
  17.     </div>
  18.     <div class="col">
  19.       <div class="p-3 border bg-light">Row column</div>
  20.     </div>
  21.     <div class="col">
  22.       <div class="p-3 border bg-light">Row column</div>
  23.     </div>
  24.     <div class="col">
  25.       <div class="p-3 border bg-light">Row column</div>
  26.     </div>
  27.     <div class="col">
  28.       <div class="p-3 border bg-light">Row column</div>
  29.     </div>
  30.     <div class="col">
  31.       <div class="p-3 border bg-light">Row column</div>
  32.     </div>
  33.   </div>
  34. </div>

No gutters

The gutters between columns in our predefined grid classes can be removed with .g-0. This removes the negative margins from .row and the horizontal padding from all immediate children columns.

Need an edge-to-edge design? Drop the parent .container or .container-fluid.

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).

Gutters - 图6

  1. <div class="row g-0">
  2.   <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  3.   <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  4. </div>

Change the gutters

Classes are built from the $gutters Sass map which is inherited from the $spacers Sass map.

  1. $grid-gutter-width: 1.5rem;
  2. $gutters: (
  3.   0: 0,
  4.   1: $spacer * .25,
  5.   2: $spacer * .5,
  6.   3: $spacer,
  7.   4: $spacer * 1.5,
  8.   5: $spacer * 3,
  9. );