Bootstrap 5, avec ses classes .row-cols-*, offre une méthode puissante et flexible pour construire des grilles adaptatives. Cet article vous guidera à travers l'utilisation de ces classes pour créer une grille dynamique qui s'adapte aux différentes tailles d'écran.
.row-cols-*Les classes .row-cols-* de Bootstrap permettent de définir le nombre de colonnes dans une rangée (row) pour différentes tailles d'écran. Ces classes s'appliquent aux éléments enfants d'un conteneur .row et assurent que chaque élément enfant occupe une quantité égale d'espace horizontal dans la rangée.
💡💡💡 Si la structure de votre grille est constante et que toutes vos colonnes ont toujours la même largeur pour un breakpoint donné, il est beaucoup plus simple, plus rapide et plus efficace d'utiliser les classes .row-cols-* sur la .row que d'utiliser les classes col- sur les colonnes! 💡💡💡
La base d'une grille avec Bootstrap commence par un conteneur .row, dans lequel vous pouvez ajouter des classes .row-cols-* pour contrôler le nombre de colonnes.
<div class="row row-cols-2">
<div class="col">Colonne 1</div>
<div class="col">Colonne 2</div>
<div class="col">Colonne 3</div>
<div class="col">Colonne 4</div>
</div>Dans cet exemple, la classe .row-cols-2 garantit que la rangée contiendra deux colonnes par ligne, peu importe la largeur de l'écran.
Pour une grille réactive, vous pouvez combiner plusieurs classes .row-cols-* avec des breakpoints spécifiques.
<div class="row row-cols-2 row-cols-md-4">
<div class="col">Colonne 1</div>
<div class="col">Colonne 2</div>
<div class="col">Colonne 3</div>
<div class="col">Colonne 4</div>
</div>Ici, row-cols-2 s'applique pour les écrans petits et moyens, assurant deux colonnes par ligne, tandis que row-cols-md-4 prend le relais sur les écrans de taille moyenne et plus, affichant quatre colonnes par ligne.
Les classes .row-cols-* peuvent être combinées avec d'autres classes de grille de Bootstrap pour un contrôle plus précis sur la mise en page.
<div class="row row-cols-2 row-cols-md-4">
<div class="col-6 col-md-3">Colonne 1</div>
<div class="col-6 col-md-3">Colonne 2</div>
<div class="col-6 col-md-3">Colonne 3</div>
<div class="col-6 col-md-3">Colonne 4</div>
</div>Dans cet exemple, les classes col-6 et col-md-3 offrent un contrôle supplémentaire sur la largeur des colonnes à différents breakpoints.
Bootstrap 5 inclut également des classes pour gérer l'espacement entre les colonnes. Les classes g-* (gutter classes) peuvent être utilisées pour définir cet espacement.
<div class="row row-cols-4 g-3">
<!-- Colonnes ici -->
</div>Les classes .row-cols-* de Bootstrap 5 sont un outil incroyablement puissant pour créer des grilles responsives. Elles offrent une flexibilité et un contrôle qui permettent aux concepteurs et développeurs de structurer le contenu de manière logique et esthétique sur tous les appareils. En maîtrisant ces classes, vous pouvez considérablement améliorer la réactivité et l'organisation de vos mises en page.