Regla vertical

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

• Miden 1px de ancho
• Tienen 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 pilas

También se pueden usar en pilas:

<div class="hstack gap-3">
  <div class="p-2">First item</div>
  <div class="p-2 ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="p-2">Third item</div>
</div>

CSS

Variables Sass

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

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