Table des matières

Le Tutoriel de Bootstrap Spacing Utility

View more Tutorials:

1- Spacing Utility

Spacing Utility (Utilité Spacing) est une partie de  Bootstrap. Il donne des classes qui permettent aux utilisateurs d'installer des valeurs  margin, padding pour des éléments. Ces classes sont adaptées aves des appareils de différente taille de l'écran.
À la base, ces classes sont nommées comme le format ci-dessous :
  • {property}{sides}-{size}

  • {property}{sides}-{breakpoint}-{size}

Alors :
  • {property} et {size} sont des valeurs obligatoires.
  • {sides} et {breakpoint} sont des valeurs facultatives.

{property}:

{property} obtient la valeur  "m" ou  "p".
{property} Description
m C'est l'abréviation de "Margin", relative à l'installation de margin des éléments.
p C'est l'abréviation de  "Padding", relative à l'installation de padding des éléments.

{sides}:

{sides} Description
t C'est l'abréviation de  "Top",relative à l'installation de margin-top ou padding-top
b C'est l'abréviation de  "Bottom", relative à l'installation de margin-bottom ou padding-bottom
l C'est l'abréviation de  "Left", relative à l'installation de margin-left ou padding-left
r C'est l'abréviation de  "Right", relative à l'installation de margin-right ou padding-right
x Indique l'axe X (Horizontale), relative à l'installation de margin-left & margin-right ou padding-left & padding-right.
y Indique l'axe Y (Verticale), relative à l'installation de margin-top & margin-bottom ou padding-top & padding-bottom.

{size}:

{size} Description
0 Définit la valeur de padding ou margin à 0.
1 Définit la valeur de  padding hoặc margin à 0.25 * $spacer.
2 Définit la valeur de  padding hoặc margin à 0.5 * $spacer.
3 Définit la valeur de  padding hoặc margin à 1 * $spacer.
4 Définit la valeur de  padding hoặc margin à 1.5 * $spacer.
5 Définit la valeur de  padding hoặc margin à 3 * $spacer.
auto Définit la valeur de​​​​​​​  margin à auto.
$spacer est une valeur définie dans le  SASS de  Bootstrap. Cette valeur est variable selon la largeur différente de l'écran.

{breakpoint}

{breakpoint} Description
sm fonctionne lorsque la largeur de l'élément parent est >= 567px.
md fonctionne lorsque la largeur de l'élément parent est  >= 768px.
lg fonctionne lorsque la largeur de l'élément parent est  >= 992px.
xl fonctionne lorsque la largeur de l'élément parent est​​​​​​​  >= 1200px.

2- Des exemples

margin-example.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Margin Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>

      <div class="container-fluid border border-primary mt-5">
         <div class="border border-danger mt-5 mr-4 mb-4 ml-auto" style="width:100px;">
           Div
         </div>
      </div>

      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>

</html>
 
paddingexample
<div class="border border-danger pt-5 pr-4 pb-4 pl-5" style="width:300px;">
   Bootstrap is a free front-end framework for faster and easier web development.
   Bootstrap includes HTML and CSS based design templates for typography ...
</div>
Si un élément est installé margin automatiquement sur la gauche et sur la droite. Il apparaîtra au centre de l'élément parent horizontalement.
center-example
<div class="container-fluid border border-primary mt-5">

   <div class="mx-auto border border-danger" style="width:100px;">
      Center DIV
   </div>

</div>

Responsive:

<div class="container-fluid border border-primary">

   <div class="border border-danger m-1 m-sm-5" style="width:100px;">
      .m-1 .m-sm-5
   </div>

</div>

View more Tutorials: