Piles
Aides raccourcies qui s'appuient sur nos utilitaires flexbox pour rendre la disposition des composants plus rapide et plus facile que jamais.
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.
Vertical
Utiliser .vstack pour créer des mises en page verticales. Les éléments empilés sont en pleine largeur par défaut. Utiliser .gap-* des utilitaires pour ajouter de l'espace entre les éléments.
<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 .hstack pour 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. Utiliser .gap-* des utilitaires pour ajouter de l'espace entre les éléments.
<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-auto comme espaceurs :
<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 :
<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
Utiliser .vstack pour 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>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;
}