Bootstrap 5.2 / Helpers

Stacks

Beknopte helpers die voortbouwen op onze flexbox-utilities om componentlayouts sneller en makkelijker dan ooit te maken.

Stacks bieden een snelle manier om een aantal flexbox-eigenschappen toe te passen en zo snel en eenvoudig layouts in Bootstrap te maken. Alle eer voor het concept en de implementatie gaat naar het open-source Pylon-project.

Let op

Let op! Ondersteuning voor gap-utilities in combinatie met flexbox is pas recent aan Safari toegevoegd, dus overweeg te controleren welke browsers je wilt ondersteunen. Bij grid-layout zou dit geen problemen moeten geven. Lees meer.

Verticaal

Gebruik .vstack om verticale layouts te maken. Gestapelde items zijn standaard volledig breed. Gebruik .gap-*-utilities om ruimte tussen de items toe te voegen.

HTML

<div class="vstack gap-3">
  <div class="bg-light border">Eerste item</div>
  <div class="bg-light border">Tweede item</div>
  <div class="bg-light border">Derde item</div>
</div>

Horizontaal

Gebruik .hstack voor horizontale layouts. Gestapelde items worden standaard verticaal gecentreerd en nemen alleen de breedte in die ze nodig hebben. Gebruik .gap-*-utilities om ruimte tussen de items toe te voegen.

HTML

<div class="hstack gap-3">
  <div class="bg-light border">Eerste item</div>
  <div class="bg-light border">Tweede item</div>
  <div class="bg-light border">Derde item</div>
</div>

Met horizontale margin-utilities zoals .ms-auto als tussenruimte:

HTML

<div class="hstack gap-3">
  <div class="bg-light border">Eerste item</div>
  <div class="bg-light border ms-auto">Tweede item</div>
  <div class="bg-light border">Derde item</div>
</div>

En met verticale scheidingslijnen:

HTML

<div class="hstack gap-3">
  <div class="bg-light border">Eerste item</div>
  <div class="bg-light border ms-auto">Tweede item</div>
  <div class="vr"></div>
  <div class="bg-light border">Derde item</div>
</div>

Voorbeelden

Gebruik .vstack om knoppen en andere elementen te stapelen:

HTML

<div class="vstack gap-2 col-md-5 mx-auto">
  <button type="button" class="btn btn-secondary">Wijzigingen opslaan</button>
  <button type="button" class="btn btn-outline-secondary">Annuleren</button>
</div>

Maak een inline formulier met .hstack:

HTML

<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Voeg hier je item toe..." aria-label="Voeg hier je item toe...">
  <button type="button" class="btn btn-secondary">Versturen</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Resetten</button>
</div>

Sass

Standaardwaarden: zie scss/helpers/_stacks.scss in de Bootstrap-broncode.