Gutters

Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap grid system. Read the Official Bootstrap Documentation for a full list of instructions and other options.

Horizontal Gutters

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

<div class="row gx-5">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Vertical Gutters

Like the horizontal gutters, the vertical gutters can cause some overflow below the .row at the end of a page.

<div class="row gy-5">
  <div class="col-6">...</div>
  <div class="col-6">...</div>
  <div class="col-6">...</div>
  <div class="col-6">...</div>
</div>

Vertical & Horizontal Gutters

Classes .g-* 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.

<div class="row g-2">
  <div class="col-6">...</div>
  <div class="col-6">...</div>
  <div class="col-6">...</div>
  <div class="col-6">...</div>
</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.

<div class="row g-0">
  <div class="col-6">...</div>
  <div class="col-6">...</div>
  <div class="col-6">...</div>
  <div class="col-6">...</div>
</div>