Gutters

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

Horizontal gutters

.gx-* classes can be used to control the horizontal gutter widths. The .row parent needs to be paired with these classes to adjust the horizontal spacings around your columns.

Custom column padding

<div class="row gx-5">
  <div class="col">
    <div class="p-3 border rounded"><span>Custom column padding</span></div>
  </div>
  <div class="col">
    <div class="p-3 border rounded"><span>Custom column padding</span></div>
  </div>
</div>

Vertical gutters

.gy-* classes control the vertical gutter widths. Like the horizontal gutter, vertical gutters can cause some confusion below the sm breakpoint due to the interplay with the .row.

Custom column padding

<div class="row gy-4">
  <div class="col-6">
    <div class="p-3 border rounded"><span>Custom column padding</span></div>
  </div>
  <div class="col-6">
    <div class="p-3 border rounded"><span>Custom column padding</span></div>
  </div>
  <div class="col-6">
    <div class="p-3 border rounded"><span>Custom column padding</span></div>
  </div>
  <div class="col-6">
    <div class="p-3 border rounded"><span>Custom column padding</span></div>
  </div>
</div>

Horizontal & vertical gutters

.g-* classes control the horizontal and vertical gutter widths. In this case, use .g-2 to set both gutters.

Custom column padding

<div class="row g-2">
  <div class="col-6">
    <div class="p-3 border rounded"><span>Custom column padding</span></div>
  </div>
  <div class="col-6">
    <div class="p-3 border rounded"><span>Custom column padding</span></div>
  </div>
  <div class="col-6">
    <div class="p-3 border rounded"><span>Custom column padding</span></div>
  </div>
  <div class="col-6">
    <div class="p-3 border rounded"><span>Custom column padding</span></div>
  </div>
</div>

No gutters

The margins applied to .row and the padding to .col can be removed with .g-0.

No gutter

<div class="row g-0">
  <div class="col-sm-6 col-md-8">
    <div class="p-3 border rounded"><span>No gutter</span></div>
  </div>
  <div class="col-6 col-md-4">
    <div class="p-3 border rounded"><span>No gutter</span></div>
  </div>
</div>

In Sass

When using the source Sass, gutters can be defined as variables and mixins:

$boodoo-gutter-x: 1.5rem;
$boodoo-gutter-y: 0;

.row {
  @include make-row();
}
.col {
  @include make-col(6);
}

Use the responsive gutter utility classes (e.g. .gx-5, .gy-4, .g-3) or CSS classes to configure gutter spacing:

<div class="row gx-5 gy-3">
  <div class="col-6">Wide gutters</div>
</div>