Verticale regel

Gebruik de aangepaste verticale regelhulp om verticale scheidingslijnen zoals het <hr>element te maken.

Op deze pagina

Hoe het werkt

Verticale regels zijn geïnspireerd op het <hr>element, zodat u verticale scheidingslijnen kunt maken in veelvoorkomende lay-outs. Ze zijn gestileerd net als <hr>elementen:

Ze zijn 1pxbreed
ze hebben min-heightvan1em
Hun kleur wordt ingesteld via currentColorenopacity

Pas ze zo nodig aan met extra stijlen.

Voorbeeld

html

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

Verticale regels schalen hun hoogte in flexibele lay-outs:

html

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

Met stapels

Ze kunnen ook in stapels worden gebruikt :

Eerste item

Tweede item

Derde item:

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">Third item</div>
</div>