Règle verticale

Utilisez l'assistant de règle verticale personnalisé pour créer des séparateurs verticaux comme l' <hr>élément.

Sur cette page

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 1pxlarges
Ils ont min-heightde1em
Leur couleur est définie via currentColoretopacity

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

Exemple

html

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

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

html

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

Avec des piles

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

Premier élément

Deuxième élément

Troisième élément

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>