Espaçamento

Bootstrap inclui uma ampla gama de margens responsivas abreviadas e classes de utilitários de preenchimento para modificar a aparência de um elemento.

Como funciona

Atribua valores marginou paddingvalores responsivos a um elemento ou a um subconjunto de seus lados com classes abreviadas. Inclui suporte para propriedades individuais, todas as propriedades e propriedades verticais e horizontais. As classes são construídas a partir de um mapa Sass padrão que varia .25remde 3rem.

Notação

Os utilitários de espaçamento que se aplicam a todos os pontos de interrupção, de xsa xl, não possuem abreviação de ponto de interrupção. Isso ocorre porque essas classes são aplicadas de min-width: 0e para cima e, portanto, não são vinculadas a uma consulta de mídia. Os pontos de interrupção restantes, no entanto, incluem uma abreviação de ponto de interrupção.

As classes são nomeadas usando o formato {property}{sides}-{size}para xse {property}{sides}-{breakpoint}-{size}para sm, md, lge xl.

Quando a propriedade é uma das seguintes:

m- para classes que definemmargin
p- para classes que definempadding

Onde lados é um dos seguintes:

t- para classes que definem margin-topoupadding-top
b- para classes que definem margin-bottomoupadding-bottom
l- para classes que definem margin-leftoupadding-left
r- para classes que definem margin-rightoupadding-right
x- para classes que definem tanto *-lefte*-right
y- para classes que definem tanto *-tope*-bottom
blank - para classes que definem um marginou paddingem todos os 4 lados do elemento

Onde o tamanho é um dos seguintes:

0- para classes que eliminam o marginou paddingconfigurando-o para0
1- (por padrão) para classes que definem o marginou paddingpara$spacer * .25
2- (por padrão) para classes que definem o marginou paddingpara$spacer * .5
3- (por padrão) para classes que definem o marginou paddingpara$spacer
4- (por padrão) para classes que definem o marginou paddingpara$spacer * 1.5
5- (por padrão) para classes que definem o marginou paddingpara$spacer * 3
auto- para classes que definem margincomo auto

(Você pode adicionar mais tamanhos adicionando entradas à $spacersvariável do mapa Sass.)

Exemplos

Aqui estão alguns exemplos representativos dessas 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;
}

Centralização horizontal

Além disso, o Bootstrap também inclui uma .mx-autoclasse para centralizar horizontalmente o conteúdo de nível de bloco de largura fixa - ou seja, o conteúdo que tem display: blocke um widthconjunto - definindo as margens horizontais como auto.

Elemento centralizado

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