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.

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.

Horizontal & vertical gutters

Use .g-* to control both.

No gutters

Use g-0 to remove all gutters.

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>