pinterest linkedin behance copy

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.

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

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.

First item
Second item
Third item
<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.

First item
Second item
Third item
<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 :

First item
Second item
Third item
<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 :

First item
Second item
Third item
<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;
}

© 2010-2024 QZYcodes by Quazerty.