Saltar al contenido principal Saltar a la navegación de la documentación
Agregado en v5.1 Ver en GitHub

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.

En esta página

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

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.

Primer elemento
Segundo elemento
Tercer elemento
html 
<div class="vstack gap-3">
  <div class="p-2">First item</div>
  <div class="p-2">Second item</div>
  <div class="p-2">Third item</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.

Primer elemento
Segundo elemento
Tercer elemento
html 
<div class="hstack gap-3">
  <div class="p-2">First item</div>
  <div class="p-2">Second item</div>
  <div class="p-2">Third item</div>
</div>

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

Primer elemento
Segundo elemento
Tercer elemento
html 
<div class="hstack gap-3">
  <div class="p-2">First item</div>
  <div class="p-2 ms-auto">Second item</div>
  <div class="p-2">Third item</div>
</div>

Y con reglas verticales:

Primer elemento
Segundo elemento
Tercer elemento
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>

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">Save changes</button>
  <button type="button" class="btn btn-outline-secondary">Cancel</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="Add your item here..." aria-label="Add your item here...">
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>

CSS

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