Stacks

Ayudantes que se basan en nuestras utilidades flexbox para hacer que el diseño de componentes sea más rápido y más fácil que nunca.

Las pilas ofrecen un atajo para aplicar una serie de propiedades de flexbox para crear diseños rápida y fácilmente en Bootstrap. Todo el crédito por el concepto y la implementación es para el proyecto Pylon (opens in a new tab) de código abierto.

¡Aviso! Recientemente se agregó a Safari compatibilidad con utilidades de gap con flexbox, así que considera verificar la compatibilidad de tu navegador. El diseño de la cuadrícula no debería tener problemas. Leer más (opens in a new tab).

Vertical

Usa .vstack para crear diseños verticales. Los elementos apilados tienen el ancho completo de forma predeterminada. Utiliza las utilidades .gap-* para agregar espacio entre elementos.

HTML

<div class="vstack gap-3">
    <div class="p-2">Primer elemento</div>
    <div class="p-2">Segundo elemento</div>
    <div class="p-2">Tercer elemento</div>
</div>

Horizontal

Usa .hstack para diseños horizontales. Los elementos apilados están centrados verticalmente de forma predeterminada y solo ocupan el ancho necesario. Utiliza las utilidades .gap-* para agregar espacio entre elementos.

HTML

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

Usar utilidades de margen horizontal como .ms-auto como espaciadores:

HTML

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

Y con reglas verticales:

HTML

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

Ejemplos

Usa .vstack para apilar botones y otros elementos:

HTML

<div class="vstack gap-2 col-md-5 mx-auto">
    <button type="button" class="btn btn-secondary">Guardar cambios</button>
    <button type="button" class="btn btn-outline-secondary">Cancelar</button>
</div>

Crea un formulario en línea con .hstack:

HTML

<div class="hstack gap-3">
    <input class="form-control me-auto" type="text" placeholder="Agrega tu elemento aquí..."
        aria-label="Agrega tu elemento aquí...">
    <button type="button" class="btn btn-secondary">Enviar</button>
    <div class="vr"></div>
    <button type="button" class="btn btn-outline-danger">Restablecer</button>
</div>

CSS

» Aprende más sobre ↗

scss/helpers/_stacks.scss (opens in a new tab)

scss/helpers/_stacks.scss

.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}
 
.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}

Ratio Enlace estirado