Regola verticale

Usa l'helper per la regola verticale personalizzata per creare divisori verticali come l' <hr>elemento.

Su questa pagina

Come funziona

Le regole verticali si ispirano <hr>all'elemento, consentendo di creare divisori verticali in layout comuni. Hanno uno stile proprio come <hr>gli elementi:

Sono 1pxlarghi
Hanno min-heightdi1em
Il loro colore è impostato tramite currentColoreopacity

Personalizzali con stili aggiuntivi secondo necessità.

Esempio

html

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

Le regole verticali scalano la loro altezza nei layout flessibili:

html

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

Con pile

Possono essere utilizzati anche in pile :

Primo elemento

Secondo elemento

Terzo elemento

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>