Spacing : margin et padding à la carte

Depuis la version 4 de Bootstrap, le framework intègre une série de classes adaptables pour vous permettre de jouer avec les marges internes (padding) et externes (margin) directement dans vos balises HTML.

Posté le par Benoît Philibert|8837 vues

Lorsque vous utilisez Bootstrap, vous utilisez forcément le système de ligne (row) et de colonne (col). Chacune de ces solutions génèrent une marge interne automatiquement (padding). Dans les versions précédentes de Bootstrap et plus particulièrement dans la V3, je vous avais proposé une solution permettant de générer des colonnes sans padding. Cette solution aserait aujourd’hui facilement réglée avec les classes spacing et surtout sans toucher aux fichiers SCSS.

Comment ça marche ?

La composition de la classe est adaptée selon 3 éléments : {propriété}{orientation}-{taille}.
Si vous voulez appliquer la classe sur une taille d’écran précise avec les breakpoints, il suffira de rajouter le {breakpoint} désiré après l’orientation : {propriété}{orientation}-{breakpoint}-{taille}.

La propriété

L’élément {propriété} est définit par un m pour margin ou un p pour padding. Si vous souhaitez ajouter ou supprimer une margin, vous commencez votre classe par un m.

L’iorientation

L’élément {orientation} permet de définir le côté ciblé par votre classe. Il existe plusieurs orientations possibles listées ci-dessous :

  • t – pour top (haut) 
  • b – pour bottom (bas)
  • l – pourleft (gauche)
  • r – pour right (droite) 
  • x – pour horizontal (droite et gauche) 
  • y – pour vertical (haut et bas) 
  • rien – pour appliquer la marge aux quatre coins (haut, droite, bas, gauche)

La taille

L’élément {taille} est définit entre 0 et 5.
La variable $spacer est alors multipliée en fonction de la taille utilisée. Cependant, la taille utilisée n’est pas le multiplicateur de la variable $spacer.
Niveau code, le framework ne fait pas la multiplication suivante : ($spacer * {taille}).
Toutefois la logique reste bonne. Vous augmentez les marges plus vous augmentez la {taille}.

Dans le fichier variables.scss vous trouverez les différentes tailles utilisées par le framework. Vous comprendrez alors la logique utilisée par Bootstrap.


// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.

$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: ($spacer * .25),
  2: ($spacer * .5),
  3: $spacer,
  4: ($spacer * 1.5),
  5: ($spacer * 3)
) !default;
On peut noter que la variable $spacer est définit par défaut sur 1rem. Pour utiliser l’espacement par défaut il vous faut alors utiliser la taille 3.

Utiliser les classes spacing

Maintenant que nous avons décortiqué la composition d’une classe spacing pour les margin et padding, nous allons utiliser ces dernières dans différents exemples.

Supprimer les marges d’un élément

De nombreux components de base proposés par Bootstrap comportent une marge interne ou externe par défaut. C’est par exemple le cas des alertes qui se composent d’une marge interne et externe.

.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

Si notre désire est de supprimer totalement les marges externes (margin), nous devons appliquer la classe m-0 à la balise HTML alert.
Pour être plus précis, nous pouvons voir que seul le margin-bottom est présent sur le component alert. Ce qui revient à dire qu’il serait plus judicieux d’utiliser la classe mb-0 (pour margin-bottom: 0;).

<div class="alert alert-primary mb-0" role="alert">
  Une alerte class alert-primary sans margin-bottom !
</div>

Jongler avec les breakpoints

Parfois, il est intéressant d’ajouter/supprimer des marges en fonctions de l’écran final d’affichage. Lorsqu’on est sur mobile, le besoin de lisibilité est important et il faut parfois ajuster l’espacement de vos différents éléments.

Rappel des différents breakpoints

// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

Afficher un padding différent sur plusieurs écrans

Nous voulons afficher un padding de 4 lorsque nous somme sur mobile et un padding de 2 lorsque nous somme sur tablette et plus.

Pour y arriver, nous devons identifier les breakpoints nécessaires :

  • padding de 4 sur mobile : p-4
  • padding de 2 sur tablette et plus : p-md-2

Dans ce cas précis, on définit le padding sur mobile comme l’espacement par défaut (rappelez-vous la logique « mobile first » de Bootstrap).
Par la suite, toute modification doit comporter un élément {breakpoint} (ici md) pour définir correctement les règles appliquées sur les écrans ciblés. La classe p-md-2 s’appliquera aux breakpoints md, lg et xl tant que vous ne définissez pas de classes spécifiques pour ces derniers.

<div class="alert alert-primary p-4 p-md-2" role="alert">
  Une alerte class alert-primary avec un padding spécifique en fonction de votre écran final.
</div>

Encore sceptique sur l’utilisation des spacing ?

Avec mon expérience, je peux comprendre que certain puriste préféreront modifier toutes ces propriétés directement dans le code SCSS. Bien évidement, je ne peux qu’approuver la démarche…quoi que…c’est aussi s’embêter pour pas grand chose lorsqu’on voit que le framework vous propose une solution claire et complète.

Pour ma part, il faut rappeler qu’un framework est majoritairement utilisé pour gagner du temps. Bon nombre d’utilisateurs ne sont pas non plus en capacité de modifier du CSS ou des variables SASS.

Parfois, il est intéressant d’ajuster une marge avec ce genre de classe sans tout chambouler dans votre code.
De plus, la possibilité d’ajuster les marges en fonctions des breakpoints responsive apporte une forte flexibilité à votre code avec peu de chose.

En savoir plus sur le spacing dans Bootstrap

N’hésitez pas à consulter la documentation officielle de Bootstrap 4 pour vous former et en apprendre plus sur le framework.


Ces articles pourraient vous intéresser

Tags

1 commentaire

  • […] décembre dernier, nous abordions les possibilités offertes par le framework pour utiliser les marges internes et externes. Depuis la version 4.2, il est possible d’utiliser les margin (marge externes exclusivement) […]

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

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