Comment ça fonctionne

Les règles verticales sont inspirées de l' <hr> élément, ce qui vous permet de créer des séparateurs verticaux dans des dispositions courantes. Ils sont stylisés comme <hr> des éléments :

• Ils sont large de 1px
• Ils ont min-height de 1em
• Leur couleur est définie via currentColor et opacity

Personnalisez-les avec des styles supplémentaires selon vos besoins.

Exemple

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

Les règles verticales mettent à l'échelle leur hauteur dans les mises en page flexibles :

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

Avec des piles

Ils peuvent également être utilisés en piles:

<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>