Regra vertical

Use o auxiliar de regra vertical personalizado para criar divisores verticais como o <hr>elemento.

Nesta página

Como funciona

As regras verticais são inspiradas no <hr>elemento, permitindo criar divisores verticais em layouts comuns. Eles são estilizados como <hr>elementos:

Eles são 1pxlargos
Eles têm min-heightde1em
Sua cor é definida via currentColoreopacity

Personalize-os com estilos adicionais conforme necessário.

Exemplo

html

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

As regras verticais dimensionam sua altura em layouts flexíveis:

html

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

Com pilhas

Eles também podem ser usados em pilhas :

Primeiro item

Segundo item

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