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="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 la línea vertical para cambiar su ancho.

scss/_variables.scss

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