Skip to main content Skip to docs navigation
En GitHub

Pilas

Helpers que se basan en nuestras utilidades flexbox para hacer que el diseño de componentes sea más rápido y 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 de código abierto proyecto Pylon.

¡Aviso! La compatibilidad de las utilidades gap con flexbox se agregó recientemente a Safari, 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 ocupan el ancho completo de forma predeterminada. Usa las utilidades .gap-* para agregar espacio entre elementos.

Primer elemento
Segundo elemento
Tercer elemento
<div class="vstack gap-3">
  <div class="bg-light border">Primer elemento</div>
  <div class="bg-light border">Segundo elemento</div>
  <div class="bg-light border">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. Usa las utilidades .gap-* para agregar espacio entre elementos.

Primer elemento
Segundo elemento
Tercer elemento
<div class="hstack gap-3">
  <div class="bg-light border">Primer elemento</div>
  <div class="bg-light border">Segundo elemento</div>
  <div class="bg-light border">Tercer elemento</div>
</div>

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

Primer elemento
Segundo elemento
Tercer elemento
<div class="hstack gap-3">
  <div class="bg-light border">Primer elemento</div>
  <div class="bg-light border ms-auto">Segundo elemento</div>
  <div class="bg-light border">Tercer elemento</div>
</div>

Y con reglas verticales:

Primer elemento
Segundo elemento
Tercer elemento
<div class="hstack gap-3">
  <div class="bg-light border">Primer elemento</div>
  <div class="bg-light border ms-auto">Segundo elemento</div>
  <div class="vr"></div>
  <div class="bg-light border">Tercer elemento</div>
</div>

Ejemplos

Usa .vstack para apilar botones y otros elementos:

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

<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">Enviar</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reiniciar</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;
}