Añadido en v5.1 Ver en GitHub

Stacks

Helpers abreviados que se construyen sobre nuestras utilidades de Flexbox para hacer el layout de componentes más rápido y fácil que nunca.

On this page

Los stacks ofrecen un atajo para aplicar una serie de propiedades de Flexbox para crear layouts rápida y fácilmente en Bootstrap. Todo el crédito por el concepto y la implementación es del proyecto de código abierto Pylon project.

¡Atención! El soporte para las utilidades de gap con Flexbox no está disponible en Safari anterior a 14.5, así que considera verificar el soporte de navegadores que deseas. El layout con CSS Grid no debería tener problemas. Lee más.

Vertical

Usa .vstack para crear layouts verticales. Los elementos apilados son de ancho completo por defecto. Usa las utilidades .gap-* para añadir espacio entre los elementos.

Primer elemento

Segundo elemento

Tercer artículo

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 layouts horizontales. Los elementos apilados están centrados verticalmente por defecto y solo ocupan el ancho necesario. Usa las utilidades .gap-* para añadir espacio entre los elementos.

Primer elemento

Segundo elemento

Tercer artículo

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>

Usando utilidades de margen horizontal como .ms-auto como separadores:

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="p-2">Third item</div>
</div>

Y con reglas verticales:

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>

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