Ajouter des marges aux éléments avec Bootstrap

Bootstrap met à notre disposition une série de classes qui vont nous permettre de définir des marges intérieures (le padding) ou extérieures (margin) tout en conservant l’aspect responsive de notre page.

 

Utiliser les notations de padding ou de margin de Bootstrap

Les classes Bootstrap nous permettant d’appliquer des marges intérieures ou extérieures à nos éléments vont toutes être construites sur le même modèle qui est le suivant : {type de marge}{côté}-{taille}.

Dans le cas où l’on souhaite appliquer des marges différentes à nos éléments selon la taille de l’écran de nos visiteurs (marges responsive), nous devrons également ajouter un breakpoint entre les notations relatives au côté d’application de la marge et sa taille. Le schéma de la classe sera alors le suivant : {type de marge}{côté}-{breakpoint}-{taille}.

Pour le premier élément de notre classe, c’est-à-dire le type de marge, nous allons pouvoir choisir entre deux valeurs :

• m va nous servir à définir une marge extérieure (margin) ;
• p va nous servir à définir une marge intérieure (padding).

Au niveau du côté de l’élément auquel doit s’appliquer la marge, nous avons le choix entre différentes valeurs :

• t va nous permettre d’appliquer une marge (margin ou padding) au niveau du côté supérieur à un élément. Cela va donc servir à définir une margin-top ou un padding-top ;
• b va nous permettre d’ajouter une marge (margin ou padding) basse à un élément ;
• r va nous permettre d’ajouter une marge (margin ou padding) droite à un élément ;
• l va nous permettre d’ajouter une marge (margin ou padding) gauche à un élément ;
• x va nous permettre de définir des marges (margin ou padding) gauche et droite à notre élément ;
• y va nous permettre de définir des marges (margin ou padding) haute et basse à notre élément.

Notez que si on omet le paramètre « côté » dans notre classe, alors la marge s’appliquera à tous les côtés de l’élément à la fois.

En termes de breakpoint, nous allons pouvoir utiliser les notations habituelles à savoir sm, md, lg et xm. Notre ici que si on ne précise pas de breakpoint alors cela revient à définir une marge pour un breakpoint xs c’est-à-dire pour toutes les tailles d’écran.

Finalement, nous allons pouvoir choisir parmi 7 valeurs différentes pour définir la taille de nos marges :

• 0 va supprimer toutes les marges (margin ou padding) appliquées à un élément ;
• 1 va définir des marges (margin ou padding) de 0.25rem par défaut (0,25 * la valeur de la variable SASS $spacer qui est définie par défaut à 1rem) ;
• 2 va définir des marges (margin ou padding) de 0.5rem par défaut (0.5 * $spacer);
• 3 va définir des marges (margin ou padding) de 1rem par défaut (1 * $spacer);
• 4 va définir des marges (margin ou padding) de 1.5rem par défaut (1.5 * $spacer);
• 5 va définir des marges (margin ou padding) de 3rem par défaut (3 * $spacer);
• La valeur auto va être exclusive aux marges extérieures et définir une margin : auto.

 

Exemples de définition de marges intérieures et extérieures en utilisant les classes Bootstrap

Je vous propose de commencer à expérimenter avec les marges intérieures et extérieures des éléments en ajoutant des padding et margin à différents paragraphes pour voir les effets produits :

See the Pen
Bootstrap 2.6.1 by Pierre (@pierregiraud)
on CodePen.

 

Centrer horizontalement un élément dans son conteneur en utilisant les marges Bootstrap

Il va être très simple d’utiliser les différentes classes Bootstrap relatives aux marges pour centrer un élément horizontalement dans un conteneur. Pour cela, il va nous suffire d’ajouter une classe .mx : auto qui correspond au final à margin : 0 auto à un élément de type block qui possède une taille définie.

See the Pen
Bootstrap 2.6.2 by Pierre (@pierregiraud)
on CodePen.

Notez que dans les exemples ci-dessus ce sont bien les éléments de type block auxquels on attribue la classe .mx-auto qui sont centrés par rapport à leur élément parent. Le contenu de ces éléments va lui être par défaut aligné à gauche.

Rien ne nous empêche cependant de centrer successivement plusieurs éléments par rapport à leur élément parent comme on l’a fait dans le dernier exemple.