Source

Espacement

Bootstrap comprend une large gamme de classes utilitaires de marge et de rembourrage réactives pour modifier l'apparence d'un élément.

Comment ça fonctionne

Attribuez des valeurs marginou responsive-friendly paddingà un élément ou à un sous-ensemble de ses côtés avec des classes abrégées. Inclut la prise en charge des propriétés individuelles, de toutes les propriétés et des propriétés verticales et horizontales. Les classes sont construites à partir d'une carte Sass par défaut allant de .25remà 3rem.

Notation

Les utilitaires d'espacement qui s'appliquent à tous les points d'arrêt, de xsà xl, n'ont pas d'abréviation de point d'arrêt. En effet, ces classes sont appliquées de min-width: 0haut en bas et ne sont donc pas liées par une requête multimédia. Cependant, les points d'arrêt restants incluent une abréviation de point d'arrêt.

Les classes sont nommées en utilisant le format {property}{sides}-{size}pour xset {property}{sides}-{breakpoint}-{size}pour sm, md, lget xl.

Lorsque la propriété est l'une des suivantes :

m- pour les classes qui fixentmargin
p- pour les classes qui fixentpadding

Où les côtés sont l'un des suivants :

t- pour les classes qui fixent margin-topoupadding-top
b- pour les classes qui fixent margin-bottomoupadding-bottom
l- pour les classes qui fixent margin-leftoupadding-left
r- pour les classes qui fixent margin-rightoupadding-right
x- pour les classes qui définissent à la fois *-leftet*-right
y- pour les classes qui définissent à la fois *-topet*-bottom
vide - pour les classes qui définissent un marginou paddingsur les 4 côtés de l'élément

Où la taille est l'une des suivantes :

0- pour les classes qui éliminent le marginou paddingen le réglant sur0
1- (par défaut) pour les classes qui définissent le marginou paddingsur$spacer * .25
2- (par défaut) pour les classes qui définissent le marginou paddingsur$spacer * .5
3- (par défaut) pour les classes qui définissent le marginou paddingsur$spacer
4- (par défaut) pour les classes qui définissent le marginou paddingsur$spacer * 1.5
5- (par défaut) pour les classes qui définissent le marginou paddingsur$spacer * 3
auto- pour les classes qui mettent le marginà auto

(Vous pouvez ajouter plus de tailles en ajoutant des entrées à la $spacersvariable de carte Sass.)

Exemples

Voici quelques exemples représentatifs de ces classes :

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

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

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

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

Centrage horizontal

De plus, Bootstrap inclut également une .mx-autoclasse pour centrer horizontalement le contenu au niveau du bloc de largeur fixe, c'est-à-dire le contenu qui a display: blocket un widthensemble, en définissant les marges horizontales sur auto.

Élément centré

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>