Source

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>