Agregado en v5.1 Ver en GitHub

Stacks (Pilas)

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

En esta página

Los Stacks (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 mérito del concepto y la implementación es del proyecto de código abierto Pylon.

¡Atención! El soporte para las utilidades gap con flexbox no está disponible en Safari antes de la versión 14.5, por lo que te recomendamos verificar el soporte del navegador que deseas. El diseño de cuadrícula (Grid) no debería tener problemas. Leer más.

Vertical

Usa .vstack para crear diseños verticales. Los elementos apilados ocupan todo el ancho de forma predeterminada. Utiliza las utilidades .gap-* para añadir espacio entre los elementos.

Primer elemento

Segundo elemento

Tercer elemento

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 se centran verticalmente por defecto y solo ocupan el ancho necesario. Utiliza las utilidades .gap-* para añadir espacio entre los elementos.

Primer elemento

Segundo elemento

Tercer elemento

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>

Uso de 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">Primer elemento</div>
  <div class="p-2 ms-auto">Segundo elemento</div>
  <div class="p-2">Tercer elemento</div>
</div>

Y con reglas verticales (vertical rules):

Primer elemento

Segundo elemento

Tercer elemento

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="Añade tu artículo aquí..." aria-label="Añade tu artículo 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

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