Regla vertical

Utiliza el asistente de regla vertical personalizado para crear divisores verticales como el elemento <hr>.

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">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.

scss/_variables.scss (opens in a new tab)

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