Spacing ^commun

Bootstrap inclut un large éventail de classes utilitaires pour les margin et padding.
Toutes les propriétés sont combinables avec les breakpoints et, toujours du plus petit vers le plus grand, il est possible de changer l'affichage d'un élément.

Nous utilisons une grille de valeurs qui sont calculées côté scss à partir d'une base :

$spacer: rem(16) !default; // on définit ici la taille de base = 16px
$spacers: () !default;
$spacers: map-merge(
  (
    0: 0,                   // = 0
    1: ($spacer * .25),     // = 4px
    2: ($spacer * .5),      // = 8px
    3: $spacer,             // = 16px
    4: ($spacer * 1.5),     // = 24px
    5: ($spacer * 3)        // = 48px
  ),
  $spacers
);

Les classes sont nommées suivant le format {property}-{sides}-{size} pour xs et {property}-{sides}-{breakpoint}-{size} pour les breakpoints sm, md, lg, xl et xxl.

• m pour margin
• p pour padding

• t pour top
• b pour bottom
• s pour start (=left en rtl)
• e pour end (-right en rtl)
• x pour left et right
• y pour top et bottom
• vide pour définir les 4 côtés

• vide xs
• sm pour small
• md pour medium
• lg pour large
• xl pour extra large
• xxl pour extra extra large

• 0 pour mettre à zéro
• 1 pour $spacer * .25
• 2 pour $spacer * .5
• 3 pour $spacer
• 4 pour $spacer * 1.5
• 5 pour $spacer * 3
• auto pour le mode automatique

Rendu des classes :

.mt-0 {
  margin-top: 0 !important;
}

.ms-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Le mode auto sur les marges permet de centrer un bloc ou inline-block au centre de la page :

<div class="mx-auto p-2" style="width: 200px; background-color:#eee;">
    Centered element
</div>

En cas d'usage de display:grid ou e display:flex, il est possible d'utiliser des gap sur l'élément parent.
Ces éléments sont responsives et sont calés sur les tailles des spacers.

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
    <div class="p-2">Grid item 1</div>
    <div class="p-2">Grid item 2</div>
    <div class="p-2">Grid item 3</div>
    <div class="p-2">Grid item 4</div>
</div>

row-gap définit l'espace vertical entre 2 rangées horizontales.

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 row-gap-3">
    <div class="p-2">Grid item 1</div>
    <div class="p-2">Grid item 2</div>
    <div class="p-2">Grid item 3</div>
    <div class="p-2">Grid item 4</div>
</div>

column-gap définit l'espace vertical entre 2 colonnes verticales.

<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 column-gap-3">
    <div class="p-2">Grid item 1</div>
    <div class="p-2">Grid item 2</div>
    <div class="p-2">Grid item 3</div>
    <div class="p-2">Grid item 4</div>
</div>

En savoir plus.