Nous allons voir dans cette leçon comment créer avec Bootstrap 5 des espaces entre les éléments ou les colonnes, que ce soit par le biais de marge externe (margin), de marge interne (padding) ou encore de gouttière (gutter en anglais) qui est une nouvelle classe intégrée a Bootstrap 5.
Mais tout d’abord, éliminons tout de suite la confusion que certains peuvent parfois avoir entre colonne et élément.
Une colonne est un espace de positionnement dans lequel viennent prendre place les éléments.
Pour bien comprendre la différence nous allons créer un 3 colonnes avec un fond blanc et une bordure à droite puis nous allons placer 1 élément dans chaque colonne (des titres h3) qui auront une couleur de fond différente.
Comme vous pouvez le voir si les éléments possèdent des espaces par défaut ce n‘est pas le cas des colonnes qui sont parfaitement collées les unes aux autres tant sur le plan horizontal (droite-gauche) que vertical (haut-bas).
Voyons comment changer tout ça.
Les différentes classes de Bootstrap 5 pour créer des marges (espaces) entre les colonnes ou les éléments ?
Tout d’abord, voici les classes qui permettent de créer des marges entre les éléments ou les colonnes.
Marge extérieure :
- .m = marge externe. Equivalent de .margin en HTML
- .mt = marge externe supérieure. Equivalent de .margin-top en HTML.
- .mb = marge externe inférieure. Equivalent de .margin-bottom en HTML.
- .ms = marge externe gauche. Equivalent de .margin-left en HTML.
- .me = marge externe droite. Equivalent de .margin-right en HTML.
- .mx = marge externe gauche et droite.
- .my = marge externe supérieure et inférieure.
Marge interne :
- .p = marge interne. Equivalent de padding en HTML
- .pt = marge interne supérieure. Equivalent de .padding-top en HTML.
- .pb = marge interne inférieure. Equivalent de .padding-bottom en HTML.
- .ps = marge interne gauche Equivalent de .padding-left en HTML.
- .pe = marge interne droite. Equivalent de .padding-right en HTML.
- .px = marge interne gauche et droite.
- .py = marge interne supérieure et inférieure.
A ses classes nous allons rajouter la taille des marges :
- 0 : pour supprimer les marges.
- 1 : pour une marge de 0.25rem.
- 2 : pour une marge de 0.5rem.
- 3 : pour une marge de 1rem.
- 4 : pour une marge de 1.5rem.
- 5 : pour une marge de 3rem.
auto ne s’utilise que sur les marges externes et définit des marges automatiques.
mx-auto : marge automatiques gauche droite.
my-auto : marge automatiques haute et basse.
Comment créer des espaces entre nos colonnes ?
Pour créer des espaces entre nos colonnes, nous allons utiliser la classe correspondant aux marges extérieures (margin).
Créons tout d’abord 3 colonnes d’une largeur de 3 colonnes chacune avec des couleurs de fond différentes pour bien les différencier et un point de transition de 768px avec la classe .md.
Pour rappel .md (medium /moyen) signifie qu’en dessous d’une résolution d’écran de 768px les colonnes se positionneront les unes en dessous des autres.
Espace horizontal (gauche et droite) entre les colonnes
Créons une marge externe droite de 3rem entre la deuxième et troisième colonne.
Pour ce faire nous allons ajouter à la colonne 2 la classe me-5
- .me = margin-end = margin-right en Html.
- 5 = 3 rem.
Si nous voulons que la colonne 2 ait une marge externe droite et gauche de 1.5 rem nous allons combiner les classes .me et .ms ou la classe .mx avec le nombre 4 correspondant à 1.5rem.
Le problème est que lorsqu’on rétrécie l’écran et que l’on passe sous le breakpoint .md (768px) la marge continue d’exister ce qui n’est pas très esthétique.
Pour résoudre ce problème nous allons rajouter la classe .md a notre marge, en d’autres termes nous allons dire a Bootstrap :
Si la taille d’écran passe en dessous de 768px enlève la marge.
Espace vertical (haut et bas) entre les colonnes
Pour ce qui concerne l’espace horizontal nous allons utiliser les classes :
- .mt pour la marge supérieure (margin-top)
- .mb pour la marge inférieure (margin-bottom).
Et nous allons rajouter un nombre de 0 à 5 pour déterminer la taille de la marge.
Exemple :
Reprenons notre colonne numéro 2 et créons une marge supérieure de 5 rem et une marge inférieure de 3 rem.
Ps : si vous souhaitez avoir des marges identiques sur les 4 cotés, utiliser uniquement la classe .m avec le nombre correspondant.
Comment créer des espaces entre les éléments ?
Comment on l’a vue en début de cours, les éléments sont les contenues placés à l’intérieur des colonnes.
Pour espacer nos éléments, nous allons pouvoir utiliser les marges externes (margin) comme avec les colonnes, mais aussi les marges internes (padding).
Pour les exemples suivants, j’ai enlevé les couleurs de fond des colonnes pour les mettre sur les éléments et j’ai rajouté des bordures aux colonnes avec la classe .border.
Les éléments sont ici les titres h3.
Les marges externes
Nous allons placer sur la deuxième colonne 4 marges différentes.
- Marge supérieure 3rem : mt-5
- Marge inférieure 1.5rem : mb-4
- Marge droite : 1 rem : me-3
- Marge gauche : 0.5rem : me-2
Si nous voulions les mêmes marges partout on aurait seulement utilisé la classe .m
Les marges internes
Pour créer des marges internes (padding) il nous suffit de remplacer la classe .m par la classe .p .
Prenons la troisième colonne et créons 4 marges internes différentes.
- Marge supérieure 3rem : pt-5
- Marge inférieure 1.5rem : pb-4
- Marge droite : 1 rem : pe-3
- Marge gauche : 0.5rem : pe-2
Si on rétrécie l’écran :
Comment enlever toutes marges (internes et externes) sur les résolutions inférieures à 768px (.md) ?
Nous allons rajouter la classe .md a toutes les marges, pour dire à Bootstrap de les faire disparaître sur les tailles d’écran inférieures à 768px.
Comment espacer les éléments avec la classe gutter ?
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 :
Maintenant, créons une marge horizontale de 3rem pour tous les éléments de la rangée en rajoutant à cette dernière la classe .gx correspondant aux marges horizontales et le nombre 5 correspondant à 3rem.
- .gx-5
Rajoutons ensuite avec la classe .gy un espace vertical de 1.5rem pour tous éléments de notre rangée.
Autre exemple :
Nous voulons que tous éléments de la rangée et des marges identiques de 3rem sur les 4 côtés.
Nous allons utiliser uniquement la classe .g plus le nombre correspondant (5).
Enfin, il est possible d’enlever la marge horizontale des éléments en attribuant le nombre 0 à la classe .gx.
Les gouttières vont aussi être très utiles si vous souhaitez avoir des marges uniquement lorsque les éléments passent les un en dessous des autres (axe vertical)
Ce n’est pas très clair ? Voici un exemple pour bien comprendre.
Nous avons deux éléments et nous voulons que le deuxième ait une marge haute de 3rem.
Si l’on utilise la classe .mt-5 qui correspond margin-top 3rem, le résultat est propre tant que nos éléments sont placés les uns en dessous des autres.
Mais lorsque j’agrandis la taille d’écran au-dessus de 768px (.md) pour que les éléments viennent se positionner les uns à côté des autres, la marge haute persiste et cela détruit note design.
Pour y remédier nous allons utiliser une gouttière avec la classe .gy pour que la marge ne s’applique que sur l’axe vertical.
Lorsqu’on agrandit l’écran pour que les éléments soient alignés les uns à côté des autres (axe horizontal) la marge haute a disparu.
