Gérer les marges internes et les marges externes avec Bootstrap4

L’une des particularités de Bootstrap est de simplifier la tâche à ses utilisateurs. L’équipe chargée de la maintenance et de l’évolution de Bootstrap a continué sur cette lancée en intégrant dans version 4 de la bibliothèque, un module de gestion des marges internes et externes très facile à utiliser quand on comprend son mode de fonctionnement.

*Les éléments mis à notre disposition par Bootstrap4 pour la gestion des marges

Avant que nous ne commencions par étudier comment attribuer les marges internes et externes avec Bootstrap4 nous allons tout d’abord découvrir les éléments qu’elle met à notre disposition pour l’attribution des marges.

  • p = pour désigner padding (marge interne)
  • m = pour désigner margin (marge externe)
  • t = pour désigner top (le haut)
  • b = pour désigner bottom (le bas)
  • l = pour désigner left (la gauche)
  • r = pour désigner right (la droite)
  • y = pour spécifier à la fois le haut et le bas
  • x = pour spécifier à la fois la gauche et la droite
  • auto = pour dire automatique
  • des valeurs de 0 à 5 : 0 correspond à 0 rem ; 1 correspond à 0.25rem ; 2 correspond à 0.5rem ; 3 correspond à 1rem ; 4 correspond 1.5rem ; 5 correspond à 3rem
  • Les suffixes permettant de préciser le type d’écran auquel vous voudriez attribuer une marge: -sm- pour les écrans de petite taille, -md- pour les écrans de taille moyenne, -lg- pour les écrans large, -xl- pour les écrans extra large.

Comment utiliser ses lettres, ses valeurs et ses suffixes pour attribuer des marges ?

*Spécifier la marge que vous voulez où vous le voulez et sur le type d’écran que vous  voulez 

Pour spécifier une marge à l’aide de Bootstrap4 à un élément  vous allez lui attribuez une classe dont la valeur  est une combinaison des différents éléments que nous avons listés en haut.

Vous n’avez pas compris ! Pas de panique, les exemples et les illustrations qui vont suivre vous aideront à mieux comprendre.

Les marges internes :

Supposons que nous désirons avoir notre élément dépourvu des marges internes : il faut juste utiliser la classe .p-0 , mais si nous voulons que l’élément ait une marge il suffit de choisir parmi les valeurs, la valeur correspondante à la marge que nous voulons puis l’appliquer, Ex : .p-2.

Dans ce cas la marge est appliquée dans tous les compartiments de l’élément(compartiment nord, compartiment sud, compartiment gauche et compartiment droit)

Exemple pratique :

<div class="bg-dark  text-center p-4">      	
    	  <div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div 
</div>

Nous avons appliqués une marge interne d’une valeur de 1.5rem à un conteneur de fond noir qui contient un contenu dont la couleur de fond est rouge.

Résultat :

Gérer les marges internes

Nous avons la possibilité d’attribuer une marge juste à un compartiment spécifique de l’élément, si c’est le compartiment nord il faut utiliser .pt-a, a correspond à la valeur de la marge, .pb-a pour le compartiment sud, .pr-a pour le compartiment droit, .pl-x pour le compartiment gauche.

De la même manière on peut aussi attribuer des marges à deux compartiments qui sont sur le même axe et léser les autres compartiments : .py-a  pour attribuer la même marge aux compartiments nord et sud et .px-a  pour attribuer la même marge aux compartiments gauche et droite.

Voici des exemples illustratifs 

Marge interne au compartiment nord de l’élément :

<div class="bg-dark  text-center pt-3"> 
    	  <div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>       
</div>

Résultat :

Marge interne avec Bootstrap

Marge interne au compartiment sud de l’élément :

<div class="bg-dark  text-center pb-3"> 
    	  <div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>       
</div>

Résultat :

Marge interne avec Bootstrap

Marge interne au compartiment droit de l’élément :

<div class="bg-dark  text-center pr-3"> 
    	  <div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>       
</div>

Résultat :

Marge interne avec Bootstrap

Marge interne au compartiment gauche de l’élément :

<div class="bg-dark  text-center pl-3"> 
    	  <div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>       
</div>

Résultat :

Marge interne avec Bootstrap

Marge interne aux compartiment nord et sud de l’élément :

<div class="bg-dark  text-center py-3"> 
    	  <div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>       
</div>

Résultat :

Marge interne avec Bootstrap

Marge interne aux compartiments gauche et droite de l’élément :

<div class="bg-dark  text-center px-3"> 
    	  <div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>       
</div>

Résultat :

Marge interne avec Bootstrap

Maintenant nous allons voir comment spécifier au programme l’écran auquel la marge doit être appliquée.

Pour spécifier le type d’écran auquel la marge doit être appliquée il faut inclure le suffixe correspondant à l’écran, voici un exemple démonstratif.

Exemple : .p-sm-2, .py-lg-4

.p-sm-2 signifie qu’on applique une marge interne de 0.5rem à tous les compartiments de l’élément sur les écrans de taille petite

.py-lg-4 signifie qu’on applique une marge interne de 1.5rem dans le compartiment nord et sud de l’élément sur les écrans larges.

Nous allons réaliser un conteneur qui sur les écrans larges est dépourvu de marge interne mais sur les écrans de taille petite possède une marge interne gauche et droite de 1.5rem.

<div class="bg-dark  text-center px-sm-4 p-lg-0"> 
    	  <div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>       
</div>

A vous de Jouer, pensez à de différentes combinaisons de marge interne que peuvent avoir un élément sur les différents type d’écran, et essayer de les transcrire en code.

Les marges externes :

La procédure d’application d’une marge externe à un élément à l’aide de Bootstrap4 est la même que celle des marges internes sauf que dans le cas des marges externes il faut utiliser m à la place de p.

Exemple : .m-2, .mt-4, .mx-1, .my-lg-5, .mx-md-3

.m-2 applique une marge externe  de 0.5 rem aux bords de l’élément sur tous les types d’écran

.mt-4 applique une marge externe de 1.5 rem en haut de l’élément sur tous les types d’écran

.mx-1 applique une marge externe de 0.25 rem à gauche et à droite de l’élément sur tous les types d’écran

.my-lg-5 applique une marge externe de 3 rem en haut et en bas de l’élément sur les écrans larges

.mx-md-3 applique une marge externe de 1 rem à gauche et à droite de l’élément sur les écrans de taille moyenne

Pour centraliser un élément au milieu il faut utiliser la classe .m-auto.

Cours précédent                                                                                          Cours suivant

Voir la table des Matières

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.