Utilitários de Espaçamento e Cores

Utilitários de Espaçamento

O Bootstrap permite aplicar margens e preenchimentos (padding) de forma muito simples, usando a seguinte sintaxe:

{m|p}-{side}-{tamanho}

Onde:

m = margin (margem)
p = padding (preenchimento)
side = lado que será aplicado
- t = top (superior)
- b = bottom (inferior)
- s = start (esquerda no LTR)
- e = end (direita no LTR)
- x = lados horizontal (start + end)
- y = lados vertical (top + bottom)
- (sem lado) = aplica em todos os lados
tamanho = intensidade de 0 a 5 (ou auto para margem automática)

Exemplos Práticos:

<div class="mb-3">Margem inferior (bottom) de tamanho 3</div>
<div class="px-4">Padding horizontal (start e end) de tamanho 4</div>
<div class="mt-5">Margem superior (top) bem grande (5)</div>
<div class="ms-auto">Empurra o elemento para a direita com margin-start automática</div>

Tabela de Referência Rápida:

Classe	Descrição
`mt-3`	Margin-top tamanho 3
`mb-2`	Margin-bottom tamanho 2
`ms-1`	Margin-start (esquerda) tamanho 1
`me-4`	Margin-end (direita) tamanho 4
`mx-0`	Margin horizontal (sem margem)
`my-5`	Margin vertical tamanho 5
`p-3`	Padding em todos os lados tamanho 3
`px-2`	Padding horizontal tamanho 2
`py-1`	Padding vertical tamanho 1

Utilitários de Cores

O Bootstrap fornece classes prontas para aplicar cores em texto, fundo e bordas.

Texto

<p class="text-primary">Texto azul padrão do tema</p>
<p class="text-success">Texto verde</p>
<p class="text-danger">Texto vermelho</p>
<p class="text-muted">Texto cinza claro</p>
<p class="text-white bg-dark">Texto branco sobre fundo escuro</p>

Fundo

<div class="bg-primary text-white">Fundo azul</div>
<div class="bg-success text-white">Fundo verde</div>
<div class="bg-danger text-white">Fundo vermelho</div>
<div class="bg-light">Fundo cinza claro</div>
<div class="bg-dark text-white">Fundo preto</div>

Bordas

<div class="border border-primary">Borda azul</div>
<div class="border border-success">Borda verde</div>
<div class="border border-danger">Borda vermelha</div>

Paleta Padrão do Bootstrap

Primary → Azul (#0d6efd)
Secondary → Cinza (#6c757d)
Success → Verde (#198754)
Danger → Vermelho (#dc3545)
Warning → Amarelo (#ffc107)
Info → Azul claro (#0dcaf0)
Light → Cinza claro (#f8f9fa)
Dark → Preto/Cinza escuro (#212529)

Combinações Práticas

É muito comum combinar utilitários de espaçamento e cor para criar cards, caixas de alerta ou seções com visual diferenciado sem escrever nenhuma linha de CSS.

<div class="bg-light p-4 mb-3 border">
  <h5 class="text-primary">Título do Card</h5>
  <p class="text-muted">Conteúdo com espaçamento e cor aplicados via classes utilitárias.</p>
</div>

Esse tipo de abordagem torna o desenvolvimento muito mais ágil e mantém o código limpo e organizado.