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>

Margem negativa

Em CSS, marginas propriedades podem utilizar valores negativos ( paddingnão podem). A partir da versão 4.2, adicionamos utilitários de margem negativa para cada tamanho inteiro diferente de zero listado acima (por exemplo, 1, 2, 3, 4, 5). Esses utilitários são ideais para personalizar as calhas da coluna da grade em pontos de interrupção.

A sintaxe é quase a mesma dos utilitários de margem positiva padrão, mas com a adição de nantes do tamanho solicitado. Aqui está uma classe de exemplo que é o oposto de .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Aqui está um exemplo de personalização da grade do Bootstrap no mdponto de interrupção médio ( ) e acima. Aumentamos o .colpreenchimento com .px-md-5e, em seguida, neutralizamos isso com .mx-md-n5o pai .row.

Preenchimento de coluna personalizado

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>