Empilement/Horizontale Bootstrap 5

Système de grille

Le système de grille de Bootstrap est construit avec flexbox et permet jusqu'à 12 colonnes sur une page.

Si vous ne souhaitez pas utiliser seules toutes les 12 colonnes, vous pouvez les combiner pour créer des colonnes plus larges :

Le système de grille est responsive et les colonnes se réorganisent automatiquement en fonction de la taille de l'écran.

Assurez-vous que la somme est égale ou inférieure à 12 (il n'est pas nécessaire d'utiliser tous les 12 colonnes disponibles).

Classes de grille

Le système de grille Bootstrap 5 fournit six classes :

  • .col- (Équipements extra-petits - largeur d'écran inférieure à 576px)
  • .col-sm- (Équipements petits - largeur d'écran égale ou supérieure à 576px)
  • .col-md- (Équipements moyens - largeur d'écran égale ou supérieure à 768px)
  • .col-lg- (Équipements grands - largeur d'écran égale ou supérieure à 992px)
  • .col-xl- (Équipements ultra-grands - largeur d'écran égale ou supérieure à 1200px)
  • .col-xxl- (Équipements extra-grands - largeur d'écran égale ou supérieure à 1400px)

En combinant ces classes, vous pouvez créer des mises en page plus dynamiques et flexibles.

Astuce :Chaque classe est agrandie proportionnellement, donc si vous voulez définir la même largeur pour sm et md, vous n'avez besoin que de définir sm.

Structure de base de la grille Bootstrap 5

Voici la structure de base de la grille Bootstrap 5 :

<!-- Contrôle de la largeur des colonnes, et de leur affichage sur différents appareils -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<!-- Ou laissez Bootstrap gérer automatiquement le layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Essayez-le vous-même

Premier exemple : créer une rangée (<div class = "row">). Ensuite, ajoutez le nombre de colonnes nécessaires (avec .col-*-* l'étiquette de la classe). La première étoile (*) représente la réactivité : sm, md, lg, xl ou xxl, et la deuxième étoile représente un nombre, la somme de chaque rangée doit être de 12.

Deuxième exemple : ne pas donner à chaque col Ajouter un nombre, laissez bootstrap gérer le layout pour créer des colonnes égales : deux "col" Élément = largeur de 50% de chaque colonne, et trois colonnes = largeur de 33.33% de chaque colonne. Quatre colonnes = 25% de largeur, etc. Vous pouvez également utiliser .col-sm|md|lg|xl|xxl Rendre les colonnes réactives.

Options de grille

Le tableau suivant résume comment le système de grille de Bootstrap 5 fonctionne sur différentes tailles d'écran :

Très petit (<576px) Petit (>=576px) Moyen (>=768px) Grand (>=992px) Très grand (>=1200px) Très grand (>=1400px)
Préfixe de classe .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Comportement de la grille Horizontal toujours Début du pliage, horizontal au-dessus du point de rupture Début du pliage, horizontal au-dessus du point de rupture Début du pliage, horizontal au-dessus du point de rupture Début du pliage, horizontal au-dessus du point de rupture Début du pliage, horizontal au-dessus du point de rupture
Largeur du conteneur Aucun (auto) 540px 720px 960px 1140px 1320px
Pour Écran vertical de téléphone Écran horizontal de téléphone Tablettes Portables Portables et ordinateurs de bureau Portables et ordinateurs de bureau
Numéro de la colonne 12 12 12 12 12 12
Largeur de la trame 1.5rem (à chaque côté de la colonne .75rem) 1.5rem (à chaque côté de la colonne .75rem) 1.5rem (à chaque côté de la colonne .75rem) 1.5rem (à chaque côté de la colonne .75rem) 1.5rem (à chaque côté de la colonne .75rem) 1.5rem (à chaque côté de la colonne .75rem)
Engrangé Oui Oui Oui Oui Oui Oui
Décalage Oui Oui Oui Oui Oui Oui
Tri des colonnes Oui Oui Oui Oui Oui Oui