La classe .g (gutter) est une nouveauté de Bootstrap 5 qui a pour but permettre des marges différentes selon l’axe souhaité, que soit l’axe horizontal ou l’axe vertical.
De plus, ces marges s’appliqueront à tous éléments situés dans une même rangée, c’est pourquoi elle doit être ajoutée à la classe .row (rangée).
- .g = toutes les marges sont identiques
- .gx = toutes les marges sur l’axe horizontal (gauche et droite) sont identiques.
- .gy = toutes les marges sur l’axe vertical (haut et bas) sont identiques.
A ses classes vient se rajouter un nombre de 0 à 5 selon l’espace souhaité.
Pour bien illustrer le fonctionnement notamment vertical, nous allons créer une 4e colonne et donner une largeur de 6 colonnes pour chacune d’entre elles avec un point de transition de 768px (.md).
Exemple :
Les éléments avec les marges par défaut :
Merci beaucoup pour cette explication