Utilitário da propriedade padding e margin
As classes utilitárias de margem e preenchimento no Bootstrap oferecem uma maneira conveniente de aplicar valores responsivos de margem ou preenchimento a um elemento ou a um conjunto específico de seus lados, usando classes abreviadas.
Sintaxe
As utilitárias de espaçamento que se aplicam a todos os breakpoints, de xs a xxl, não têm abreviação de breakpoint. Isso ocorre porque essas classes são aplicadas a partir de min-width: 0 e, portanto, não estão vinculadas a uma media query. Os breakpoints restantes incluem uma abreviação de breakpoint.
As classes são nomeadas usando o formato {propriedade}{lados}-{tamanho} para xs e {propriedade}{lados}-{breakpoint}-{tamanho} para sm, md, lg, xl, e xxl.
Onde a propriedade é uma das seguintes:
m- para classes que definem margemp- para classes que definem preenchimento
Onde os lados é um dos seguintes:
t- para classes que definemmargin-topoupadding-topb- para classes que definemmargin-bottomoupadding-bottoms- (start) para classes que definemmargin-leftoupadding-leftem LTR,margin-rightoupadding-rightem RTLe- (end) para classes que definemmargin-rightoupadding-rightem LTR, margin-left ou padding-left em RTLx- para classes que definem ambos*-lefte*-righty- para classes que definem ambos*-tope*-bottom- em branco - para classes que definem margem ou preenchimento em todos os 4 lados do elemento
Onde o tamanho é um dos seguintes:
0- para classes que eliminam a margem ou preenchimento definindo-a como 01- (por padrão) para classes que definem a margem ou preenchimento como$spacer * .252- (por padrão) para classes que definem a margem ou preenchimento como$spacer * .53- (por padrão) para classes que definem a margem ou preenchimento como$spacer4- (por padrão) para classes que definem a margem ou preenchimento como$spacer * 1.55- (por padrão) para classes que definem a margem ou preenchimento como$spacer * 3- auto - para classes que definem a margem como
auto
(É possível adicionar mais tamanhos adicionando entradas à variável Sass $spacers.)
Exemplos
.mt-0 {
margin-top: 0 !important;
}
.ms-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 inclui a classe .mx-auto para centralizar horizontalmente o conteúdo de bloco de largura fixa. Isso é feito configurando as margens horizontais como auto.
<div class="mx-auto" style="width: 200px;">
Elemento Centralizado
</div>
Margem negativa
Em CSS, as propriedades de margem podem utilizar valores negativos (o preenchimento não pode). Essas margens negativas são desativadas por padrão, mas podem ser habilitadas no Sass por meio da configuração $enable-negative-margins: true.
A sintaxe é semelhante dos utilitários de margem positiva, mas com a adição do prefixo n antes do tamanho desejado. Por exemplo, a classe que é o oposto de .mt-1 é:
.mt-n1 {
margin-top: -0.25rem !important;
}