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