Piles

Aides raccourcies qui s'appuient sur nos utilitaires flexbox pour rendre la disposition des composants plus rapide et plus facile que jamais.

Sur cette page

Les piles offrent un raccourci pour appliquer un certain nombre de propriétés flexbox afin de créer rapidement et facilement des mises en page dans Bootstrap. Tout le crédit pour le concept et la mise en œuvre revient au projet open source Pylon .

La tête haute! La prise en charge des utilitaires d'écart avec flexbox a été récemment ajoutée à Safari, pensez donc à vérifier la prise en charge de votre navigateur. La disposition de la grille ne devrait poser aucun problème. En savoir plus .

Vertical

Utilisez .vstackpour créer des mises en page verticales. Les éléments empilés sont en pleine largeur par défaut. Utilisez .gap-*des utilitaires pour ajouter de l'espace entre les éléments.

Premier élément

Deuxième élément

Troisième élément

<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

À utiliser .hstackpour les mises en page horizontales. Les éléments empilés sont centrés verticalement par défaut et n'occupent que leur largeur nécessaire. Utilisez .gap-*des utilitaires pour ajouter de l'espace entre les éléments.

Premier élément

Deuxième élément

Troisième élément

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

Utilisation d'utilitaires de marge horizontale comme .ms-autocomme espaceurs :

Premier élément

Deuxième élément

Troisième élément

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

Et avec des règles verticales :

Premier élément

Deuxième élément

Troisième élément

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

Exemples

Utilisez .vstackpour empiler des boutons et d'autres éléments :

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

Créer un formulaire en ligne avec .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">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>

Toupet

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