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 utilidades de gap con Flexbox se añadió recientemente a Safari, así que considera verificar el soporte de navegadores que deseas. El layout de 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="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">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="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">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="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

Y con reglas verticales:

Primer elemento

Segundo elemento

Tercer artículo

html

<div class="hstack gap-3">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">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>

Sass

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