Regla vertical

Usa el helper personalizado de regla vertical para crear divisores verticales como el elemento <hr>.

On this page

Cómo funciona

Las reglas verticales están inspiradas en el elemento <hr>, permitiéndote crear divisores verticales en layouts comunes. Tienen los mismos estilos que los elementos <hr>:

Tienen 1px de ancho
Tienen un min-height de 1em
Su color se establece mediante currentColor y opacity

Personalízalos con estilos adicionales según sea necesario.

Ejemplo

html

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

Las reglas verticales escalan su altura en layouts flex:

html

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

Con stacks

También se pueden usar en stacks:

Primer elemento

Segundo elemento

Tercer artículo

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>