Aides

Séparateur vertical

La classe .vr trace un trait vertical fin entre deux éléments, comme <hr> le fait à l’horizontale. Elle s’étire sur la hauteur de la rangée flexible qui la contient.

.vr est un élément inline-block d’une largeur égale à la bordure (1px), qui prend la hauteur de son parent (align-self: stretch) et au minimum 1em. Sa couleur est celle du texte (currentcolor), à 25 % d’opacité.

Séparateur dans une rangée#

Le trait sépare deux informations d’un compte.

Compte courant

0012-4587

<div class="d-flex gap-3">
  <div>Compte courant</div>
  <div class="vr"></div>
  <div>0012-4587</div>
</div>

Dans une pile horizontale#

Avec .hstack, le séparateur prend la hauteur de la rangée.

Solde : 480 000 FCFA

Découvert autorisé : 200 000 FCFA

Voir le relevé

<div class="hstack gap-3">
  <div class="p-2">Solde : 480 000 FCFA</div>
  <div class="vr"></div>
  <div class="p-2">Découvert autorisé : 200 000 FCFA</div>
  <div class="vr"></div>
  <a href="#" class="p-2">Voir le relevé</a>
</div>

Couleur, opacité et épaisseur#

Les utilitaires de couleur de texte, d’opacité et de largeur s’appliquent au séparateur.

<div class="d-flex gap-3" style="height: 3rem">
  <div class="vr"></div>
  <div class="vr text-primary opacity-100"></div>
  <div class="vr text-success opacity-100" style="width: 3px"></div>
  <div class="vr text-danger opacity-50"></div>
</div>

Classe et variables

Classe et variables
Élément	Valeur par défaut	Rôle
`.vr`	—	Séparateur vertical : `inline-block`, étiré sur la hauteur du parent, `min-height: 1em`.
`$vr-border-width`	`var(--bs-border-width)`	Largeur du trait.
`$hr-opacity`	`.25`	Opacité du trait, partagée avec le séparateur horizontal.
`.text-*`	—	Change la couleur du trait (`currentcolor`).
`.opacity-*`	—	Change son opacité.

Bonnes pratiques

À faire

Utilisez .vr seulement dans une rangée Flexbox ou une pile horizontale pour que le trait prenne la hauteur voulue.
Gardez-le purement décoratif : l’information ne doit pas dépendre du trait.

À éviter

Ne l’utilisez pas hors d’un conteneur flexible sans fixer sa hauteur : il ne ferait qu'1em.

Accessibilité

Le séparateur est décoratif ; ajoutez aria-hidden="true" s’il apparaît dans le flux de lecture.
Utilisez des éléments de liste (<ul>) ou un role="separator" quand la séparation a une portée sémantique.