Aides

Piles

Les classes .vstack et .hstack empilent des éléments à la verticale ou à l’horizontale, avec un écart réglable par .gap-*. C’est la façon la plus courte de faire une liste ou une rangée alignée.

.vstack est un conteneur Flexbox en colonne ; .hstack en ligne, avec les éléments centrés verticalement. Les deux s’étirent sur la largeur du parent (align-self: stretch). Vous les combinez avec les utilitaires d’espacement et les utilitaires Flexbox.

Pile verticale#

Une liste de comptes empilés avec un écart de 3.

Compte courant : 480 000 FCFA

Livret A : 1 250 000 FCFA

Compte épargne projet : 320 000 FCFA

<div class="vstack gap-3">
  <div class="bg-body-secondary border p-3">Compte courant : 480 000 FCFA</div>
  <div class="bg-body-secondary border p-3">Livret A : 1 250 000 FCFA</div>
  <div class="bg-body-secondary border p-3">Compte épargne projet : 320 000 FCFA</div>
</div>

Pile horizontale#

Les éléments sont alignés sur une ligne et centrés verticalement.

Virement

Prélèvement

Dépôt

<div class="hstack gap-3">
  <div class="bg-body-secondary border p-2">Virement</div>
  <div class="bg-body-secondary border p-2">Prélèvement</div>
  <div class="bg-body-secondary border p-2">Dépôt</div>
</div>

Pousser un élément à droite#

Une marge automatique (.ms-auto) pousse l’élément vers l’autre extrémité. .vr ajoute un séparateur vertical.

Compte courant

Solde : 480 000 FCFA

Détails

<div class="hstack gap-3">
  <div class="p-2 fw-semibold">Compte courant</div>
  <div class="p-2 ms-auto">Solde : 480 000 FCFA</div>
  <div class="vr"></div>
  <a href="#" class="p-2">Détails</a>
</div>

Formulaire en ligne#

Un champ et un bouton alignés avec .hstack.

<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Montant en FCFA" aria-label="Montant en FCFA">
  <button type="button" class="btn btn-primary">Simuler</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-secondary">Réinitialiser</button>
</div>

Pile verticale de boutons#

Un empilement de boutons de largeur identique.

<div class="vstack gap-2 col-md-5 mx-auto">
  <button type="button" class="btn btn-primary">Effectuer un virement</button>
  <button type="button" class="btn btn-outline-secondary">Programmer un virement</button>
</div>

Classes

Classes
Classe	Propriétés appliquées
`.vstack`	`display: flex`, `flex: 1 1 auto`, `flex-direction: column`, `align-self: stretch`
`.hstack`	`display: flex`, `flex-direction: row`, `align-items: center`, `align-self: stretch`
`.gap-{0 à 5}`	Écart entre les éléments de la pile.
`.ms-auto`, `.me-auto`	Pousse un élément vers la droite ou la gauche.
`.vr`	Séparateur vertical : voir Séparateur vertical.