Regla vertical (Vertical rule)

Cómo funciona

Las reglas verticales están inspiradas en el elemento <hr>, lo que te permite crear divisores verticales en diseños comunes. Tienen el mismo estilo que los elementos <hr>:

• Tienen 1px de ancho
• Tienen una altura mínima (min-height) de 1em
• Su color se establece mediante currentColor y opacity

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

Ejemplo

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

Las reglas verticales escalan su altura en diseños flex:

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

Con stacks (pilas)

También se pueden usar en stacks (pilas):

<div class="hstack gap-3">
  <div class="p-2">Primer elemento</div>
  <div class="p-2 ms-auto">Segundo elemento</div>
  <div class="vr"></div>
  <div class="p-2">Tercer elemento</div>
</div>

CSS

Variables Sass

Personaliza la variable Sass de regla vertical para cambiar su ancho.

$vr-border-width:             var(--#{$prefix}border-width);