Skip to main content Skip to docs navigation
En GitHub

Regla vertical

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

En esta página

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

  • Son 1px de ancho
  • Tienen min-height de 1em
  • Su color se establece a través de 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 flexibles:

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

Con pilas (stacks)

También se pueden usar en stacks:

Primer elemento
Segundo elemento
Tercer elemento
<div class="hstack gap-3">
  <div class="bg-light border">Primer elemento</div>
  <div class="bg-light border ms-auto">Segundo elemento</div>
  <div class="vr"></div>
  <div class="bg-light border">Tercer elemento</div>
</div>