Comment créer des espaces et des marges entre les éléments et les colonnes avec Bootstrap 5 ?

Comment espacer les colonnes avec Bootstrap 5

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.

Table des matieres

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.

Comment espacer les colonnes avec Bootstrap 5
espacer les colonnes avec Bootstrap 5
Comment créer des espaces et des marges entre les éléments et les colonnes avec Bootstrap 5 ?

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.

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.

Comment espacer les colonnes avec Bootstrap 5

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.
Comment espacer les colonnes avec Bootstrap 5

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.

Comment espacer les colonnes avec Bootstrap 5

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.

Comment espacer les colonnes avec Bootstrap 5

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.

Comment espacer les colonnes avec Bootstrap 5

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.

Bootstrap 5 Espace vertical entre les colonnes

Ps : si vous souhaitez avoir des marges identiques sur les 4 cotés, utiliser uniquement la classe .m avec le nombre correspondant.

Bootstrap 5 Espace vertical entre les colonnes

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.

Comment espacer les elements avec Bootstrap 5 ?

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
Comment espacer les elements avec Bootstrap 5 ?

Si nous voulions les mêmes marges partout on aurait seulement utilisé la classe .m

Comment espacer les elements avec Bootstrap 5 ?

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
Comment espacer les elements avec Bootstrap 5 ?

Si on rétrécie l’écran :

Comment espacer les colonnes avec Bootstrap 5

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 elements avec Bootstrap 5 ?

Comment espacer les élément 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 :

Comment espacer les elements avec la classe gutter

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
Comment espacer les elements avec la classe gutter

Rajoutons ensuite avec la classe .gy un espace vertical de 1.5rem pour tous éléments de notre rangée.

Comment espacer les elements avec la classe gutter

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).

Comment espacer les elements avec la classe gutter

Enfin, il est possible d’enlever la marge horizontale des éléments en attribuant le nombre 0 à  la classe .gx.

Comment espacer les elements avec la classe gutter

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.

Comment espacer les elements avec la classe gutter

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.

Comment espacer les elements avec la classe gutter

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.

Comment espacer les elements avec la classe gutter

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.

Comment espacer les elements avec la classe gutter
Nous serions ravis de connaître votre avis

Laisser un commentaire

error: Content is protected !!
 
BOOGLIT
Logo
Enable registration in settings - general
Compare items
  • Total (0)
Compare
0