Le système de grille de Bootstrap 5 appelé grid en anglais est l’un des points forts du Framework.
Le positionnement des éléments sur une page peut vite devenir fastidieux notamment lorsqu’on se lance dans la réalisation d’un site complexe et responsive.
C’est là que Bootstrap 5 montre toute l’étendue de son potentiel en créant des grilles qui vont s’adapter automatiquement aux résolutions d’écrans de vos lecteurs.
De plus, il vous sera très facile de changer le design de votre site en fonction de cette même résolution par le biais des breakpoints (points de transition) que nous verrons en détail dans la leçon suivante.
La grille de Bootstrap 5 se divise en un maximum de 12 colonnes responsives qui s’étendent sur toute la largeur de la rangée dans laquelle elles sont placées.
Nous allons voir dans cette première partie comment créer une page avec des éléments de différentes largeurs en jouant sur le nombre de colonnes contenues dans chaque rangée.
Dans les leçons suivantes, nous verrons comment réaliser des maquettes beaucoup plus complexes.
Les principales classes CSS pour les grilles de Bootstrap 5
Ce sont les classes que vous allez utiliser le plus pour positionner les colonnes sur la grille :
- .container et .container- fluid (conteneur).
- .row (rangée).
- .col (colonne).
Sur ces classes vont venir se greffer d’autres classes que nous allons voir plus bas.
La différence entre les classes .container et .container-fluid
Les conteneurs sont fortement conseillés pour utiliser de manière efficace le système de grilles offert par Bootstrap 5. C’est à l’intérieur de ce dernier que vont venir se loger les rangées et les colonnes.
La classe .container va définir une taille fixe et responsive (fluide) pour chacun des breakpoints, c’est-à-dire que pour une même résolution d’écran le conteneur offrira toujours la même taille, mais par contre sa taille évoluera lorsqu’on changera de résolution.
La classe .container-fluid quant à elle va créer une taille fixe et responsive qui occupera 100% de la largeur, peu importe la résolution d’écran des visiteurs.
Exemple :
*Pour plus de clarté, j’ai rajouté une couleur de fond sur le conteneur et le body et mis le texte en blanc.
Je vous conseille de vous pratiquer les différents conteneurs chez vous pour bien comprendre la différence entre les deux.
La classe .container-fluid est souvent utilisée pour les menus et barres de navigation, Header (entêté) et Footer (pied de page) qui occupe souvent 100% de la largeur et ne nécessite pas de marge.
La classe .container quant à elle et plus utilisée pour ce qui tout ce qui concerne le contenu de la page (situé entre le Header et Footer).
Comment créer des rangées et des colonnes avec Bootstrap 5 ?
Pour créer des rangées avec Bootstrap 5 nous allons utiliser la classe .row que nous allons placé à l’intérieur d’un conteneur.
Pour les colonnes nous allons utiliser la classe .col que nous allons placé à l’intérieur d’une rangée.
Pour bien illustrer à quoi corresponds les rangées nous allons-en créer deux avec une couleur de fond différente pour chacune d’entre elles et y placer deux titres h2 a l’intérieur.
*Précisons que cette structure n’est pas correcte, les rangées ne doivent intégrer que des colonnes.
Maintenant, voyons la structure correcte en créant des colonnes pour y placer des éléments.
Nous allons créer une rangée dans laquelle on va placer 3 colonnes et un titre h3 dans chacune des colonnes.
En premier nous créons un conteneur :
<div class= »container« > <div>
Nous plaçons une rangée dans le conteneur :
<div class= »container »>
<div class= »row text-light bg-danger »></div>
</div>
Nous mettons 3 colonnes dans la rangée :
<div class= »container »>
<div class= »row text-light bg-danger »>
<div class= »col« ></div>
<div class= »col« ></div>
<div class= »col« ></div>
</div>
<div>
Enfin nous plaçons 1 titre h3 dans chacune des colonnes :
<div class= »container »>
<div class= »row »>
<div class= »col bg-danger text-light »>
<h3>Colonne 1</h3>
</div>
<div class= »col bg-info text-light »>
<h3>Colonne 2</h3>
</div>
<div class= »col bg-secondary text-light »>
<h3>Colonne 3</h3>
</div>
</div>
<div>
Comme on peut le voir, nous avons 3 colonnes parfaitement alignées, de taille identique et qui occupent la totalité de la grille.
Comme l’espace total d’une grille est de 12 colonnes, lorsqu’on crée 3 colonnes, chacune d’elle occupe un espace de 4 colonnes. 12 : 3 = 4
Pour mieux comprendre, créons une rangée avec 12 colonnes :
Si vous rétrécissez l’écran, vous verrez que les colonnes restent alignées jusqu’à un certain point de transition, en dessous duquel elles vont basculer les unes au-dessus des autres pour conserver un design propre.
Nous verrons bientôt les différents points de transition (breakpoints) dans Bootstrap 5 et comment s’en servir correctement.
Créons maintenant une rangée avec une seule colonne.
La colonne occupe la totalité de la grille soit 12 colonnes.
Créer plusieurs rangées avec un nombre de colonnes différentes
La première rangée va intégrer 1 seule colonne elle occupera donc l’espace de 12 colonnes sur la grille.
La deuxième rangée va comprendre 3 colonnes, chacune d’entre elles occupera donc l’espace de 4 colonnes (12 : 3 = 4) sur la grille.
La troisième rangée va comprendre 2 colonnes, chacune d’entre elles occupera donc l’espace de 6 colonnes (12 : 2 = 6) sur la grille.
Comment créer des colonnes de tailles différentes dans une même rangée ?
On a vu jusqu’à présent comment Bootstrap ajusté automatiquement la taille des colonnes dans une rangée et faisait en sorte que toutes les colonnes se trouvant dans une même rangée soient de la même largeur.
Pour rappel, il divise les 12 colonnes de la grille par le nombre de colonnes créées et ajuste ces dernières pour que chacune possède la même taille.
2 colonnes occuperont un espace de 6 colonnes chacune sur la grille. 12 : 2 = 6.
3 colonnes occuperont un espace de 4 colonnes chacune sur la grille. 12 : 3 = 4.
Etc.
Mais comment faire si nous voulons créer une rangée avec des colonnes de taille différentes, par exemple 1 colonne occupant un espace de 6 colonnes et 1 colonne occupant l’espace de 2 colonnes ?
Nous allons rajouter à la classe .col le nombre de colonnes que l’on veut utiliser pour telle ou telle colonne.
.col-6 = occupation de 6 colonnes.
.col-2 = occupation de 2 colonnes.
Comme vous pouvez le voir, il nous reste encore un espace de 4 colonnes à droite pour nous permettre de placer un autre élément si on le souhaite.
12 – (6+2) = 4
Nous avons fini cette première partie sur les grilles proposées par Bootstrap 5. Nous allons voir dans les leçons suivantes comment faire pour réaliser des grilles beaucoup plus complexes, et comment maîtriser le système de Breakpoints.
