Bootstrap 5.2 / Helpers

Verticale scheidingslijn

Gebruik de eigen vertical rule-helper om verticale scheidingslijnen te maken, net als het `<hr>`-element.

Hoe het werkt

Verticale scheidingslijnen zijn geïnspireerd op het <hr>-element en stellen je in staat verticale scheidingen in gangbare layouts te maken. Ze zijn precies zo opgemaakt als <hr>-elementen:

Ze zijn 1px breed
Ze hebben een min-height van 1em
Hun kleur wordt bepaald via currentColor en opacity

Pas ze zo nodig aan met extra stijlen.

Voorbeeld

HTML

<div class="vr"></div>

Verticale scheidingslijnen schalen hun hoogte mee in flex-layouts:

HTML

<div class="d-flex" style="height: 200px;">
  <div class="vr"></div>
</div>

Met stacks

Ze kunnen ook worden gebruikt in stacks:

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>