Bootstrap 5.2 / Layout

Gutters

Gutters zijn de padding tussen je kolommen, die wordt gebruikt om content in het Bootstrap-grid-systeem responsief te spatiëren en uit te lijnen.

Hoe ze werken

Gutters zijn de tussenruimtes tussen kolomcontent, gemaakt met horizontale padding. We zetten padding-right en padding-left op elke kolom en gebruiken een negatieve margin om dat aan het begin en einde van elke rij te compenseren, zodat content uitlijnt.
Gutters beginnen op een breedte van 1.5rem (24px). Daardoor sluit ons grid aan op de schaal van padding- en margin-spacers.
Gutters kunnen responsief worden aangepast. Gebruik breakpoint-specifieke gutter-klassen om horizontale gutters, verticale gutters en alle gutters aan te passen.

Horizontale gutters

.gx-*-klassen kunnen worden gebruikt om de horizontale gutterbreedtes te bepalen. De bovenliggende .container of .container-fluid moet mogelijk worden aangepast als er ook grotere gutters worden gebruikt, om ongewenste overflow te voorkomen; gebruik daarvoor een bijpassende padding-utility. In het volgende voorbeeld hebben we bijvoorbeeld de padding vergroot met .px-4:

HTML

<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Eigen kolompadding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Eigen kolompadding</div>
    </div>
  </div>
</div>

Een alternatieve oplossing is een wrapper met de klasse .overflow-hidden om de .row heen te zetten:

HTML

<div class="container overflow-hidden text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Eigen kolompadding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Eigen kolompadding</div>
    </div>
  </div>
</div>

Verticale gutters

.gy-*-klassen kunnen worden gebruikt om de verticale gutterbreedtes binnen een rij te bepalen wanneer kolommen naar nieuwe regels omslaan. Net als de horizontale gutters kunnen de verticale gutters aan het einde van een pagina wat overflow onder de .row veroorzaken. Als dat gebeurt, zet je een wrapper met de klasse .overflow-hidden om .row heen:

HTML

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">Eigen kolompadding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Eigen kolompadding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Eigen kolompadding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Eigen kolompadding</div>
    </div>
  </div>
</div>

Horizontale & verticale gutters

.g-*-klassen kunnen worden gebruikt om de gutterbreedtes te bepalen; voor het volgende voorbeeld gebruiken we een kleinere gutterbreedte, zodat de wrapper-klasse .overflow-hidden niet nodig is.

HTML

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border bg-light">Eigen kolompadding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Eigen kolompadding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Eigen kolompadding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Eigen kolompadding</div>
    </div>
  </div>
</div>

Gutters bij row columns

Gutter-klassen kunnen ook aan row columns worden toegevoegd. In het volgende voorbeeld gebruiken we responsieve row columns en responsieve gutter-klassen.

HTML

<div class="container text-center">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
  </div>
</div>

Geen gutters

De gutters tussen kolommen in onze vooraf gedefinieerde grid-klassen kunnen worden verwijderd met .g-0. Dit verwijdert de negatieve margins van .row en de horizontale padding van alle direct onderliggende kolommen.

Een ontwerp van rand tot rand nodig? Laat de bovenliggende .container of .container-fluid weg en voeg .mx-0 toe aan de .row om overflow te voorkomen.

In de praktijk ziet dat er zo uit. Let op: je kunt dit blijven combineren met alle andere vooraf gedefinieerde grid-klassen (waaronder kolombreedtes, responsieve tiers, herordening en meer).

HTML

<div class="row g-0 text-center">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

De gutters wijzigen

Klassen worden opgebouwd uit de Sass-map $gutters, die wordt overgenomen van de Sass-map $spacers.

SCSS

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