Regra vertical

Use o asistente de regras verticais personalizadas para crear divisores verticais como o <hr>elemento.

Nesta páxina

Cómo funciona

As regras verticais están inspiradas no <hr>elemento, o que lle permite crear divisores verticais en deseños comúns. Levan un estilo igual que os <hr>elementos:

Son 1pxanchos
Teñen min-heightde1em
A súa cor establécese mediante currentColoreopacity

Personalízaos con estilos adicionais segundo sexa necesario.

Exemplo

html

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

As regras verticais escalan a súa altura en deseños flexibles:

html

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

Con pilas

Tamén se poden usar en pilas :

Primeiro elemento

Segundo elemento

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