Classes Utiliarias de Espaçamento no Boostrap são nomeadas usando
esse formato:
{property} {sides} - {size} or {property} {sides} -
{breakpoint} - {size}.
Propiedades: `m` para margin, `p` para padding. lados:
lados:
`t`: top
`b`: bottom
`s`: start (left in LTR, right in RTL)
`e`: end (right in LTR, left in RTL)
`x`: left and right `y`: top and bottom
(em branco): Todos os
4 lados
Use essas classes para transformar um elemento em um container Flexbox.
.d-flex -> display: flex; (Cria um container flex de bloco)
.d-inline-flex -> display: inline-flex; (Cria um container flex inline)
Variações Responsivas: Você pode usar variações como .d-sm-flex, .d-md-flex, .d-lg-flex, .d-xl-flex, .d-xxl-flex para aplicar o display flex a partir de um breakpoint específico.
Define a direção dos itens dentro do container flex.
.flex-row -> flex-direction: row; (Padrão; itens da esquerda para a direita)
.flex-row-reverse -> flex-direction: row-reverse; (Itens da direita para a esquerda)
.flex-column -> flex-direction: column; (Itens de cima para baixo)
.flex-column-reverse -> flex-direction: column-reverse; (Itens de baixo para cima)
flex-direction -> column-reverse; (Itens de baixo para cima)
Variações Responsivas: Combine com breakpoints, ex: .flex-md-row, .flex-lg-column-reverse.
Alinha os itens flex ao longo do eixo principal do container.
.justify-content-start -> justify-content: flex-start; (Padrão; itens no início do eixo)
.justify-content-end -> justify-content: flex-end; (Padrão; itens no final do eixo)
.justify-content-center -> justify-content: center; (Itens centralizados no eixo)
.justify-content-around -> justify-content: around; (Espaço distribuído uniformemente ao redor dos itens)
.justify-content-between -> justify-content: beetwen; (Espaço distribuído uniformemente entre os itens, primeiro e último na borda)
.justify-content-evenly -> justify-content: evenly; (Espaço distribuído uniformemente entre e ao redor dos itens)
Variações Responsivas: Combine com breakpoints, ex: .justify-content-md-center.
Alinha os itens flex ao longo do eixo principal do container.
.aling-items-start -> align-items: flex-start; (Itens no início do eixo transversal)
.aling-items-end -> align-items: flex-end; (Itens no final do eixo transversal)
.aling-items-center -> align-items: center; (Itens centralizados no eixo transversal)
.aling-items-baseline -> align-items: baseline; (Itens alinhados pela linha de base de seu conteúdo)
.aling-items-streech -> align-items: strech ;(Padrão; itens esticados para preencher o container, respeitando min/max-width/height)
Alinha os itens flex ao longo do eixo principal do container.
.aling-self-start -> aling-self: flex-start;
.aling-self-end -> align-self: flex-end;
.aling-self-center -> align-self: center;
.aling-self-baseline -> align-self: baseline;
.aling-items-strech -> align-self: strech;
Define se os itens flex devem quebrar para a próxima linha.
.flex-nowrap -> flex-wrap: nowrap; (Padrão; itens permanecem em uma única linha)
.flex-wrap -> flex-wrap: wrap; (Itens quebram para múltiplas linhas)
.flex-wrap-reverse ->flex-wrap: wrap-reverse; (Itens quebram para múltiplas linhas, mas em ordem inversa)
Alinha as linhas flex dentro de um container flex com múltiplas linhas.
Aplica-se apenas quando flex-wrap: wrap; ou flex-wrap: wrap-reverse; e há espaço extra no eixo transversal.
.align-content-start -> align-content: flex-start;
.align-content-end -> align-content: flex-end;
.align-content-center -> align-content: center;
.align-content-around -> align-content: space-around;
.align-content-strech -> align-content: strech;
.align-content-between -> align-content: space-beetwen;
Variações Responsivas: Combine com breakpoints, ex: .align-content-md-center.
Controla como os itens flex crescem ou encolhem para preencher o espaço disponível.
.flex-grow-0 -> flex-grow: 0; (Não cresce)
.flex-grow-1 -> flex-grow: 1; (Cresce para preencher o espaço disponível)
.flex-shrink-0 -> flex-shrink: 0; (Não encolhe)
.flex-shrink-1 -> flex-shrink: 1; (Encolhe se necessário)
Variações Responsivas: Combine com breakpoints, ex: .flex-lg-grow-1.
Utilize as classes de margem automática para empurrar itens em direções específicas dentro de um container flex.
.me-auto > margin-inline-end: auto; (Empurra para o final do eixo principal)
.ms-auto -> margin-inline-start: auto; (Empurra para o início do eixo principal)
.mb-auto -> margin-bottom: auto;
.mt-auto -> margin-top: auto;
Ex: Para empurrar um item para a direita em uma linha (.flex-row), use .ms-auto no item.
Altera a ordem visual de itens flex específicos.
.order-0: order: 0;
.order-1: order: 1;
.order-2: order: 2;
até .order-5: order: 5;
.order-first: order: -1; (Faz o item aparecer primeiro)
.order-last: order: 6; (Faz o item aparecer por último)
Use essas classes para configurar rapidamente a propriedade position de um elemento.
.position-static: position: static; (Padrão, elemento no fluxo normal do documento)
.position-relative: position: relative; (Elemento posicionado em relação à sua posição normal)
.position-absolute: position: absolute; (Elemento posicionado em relação ao seu pai mais próximo com position: relative, absolute, fixed ou sticky)
.position-fixed: position: fixed; (Elemento posicionado em relação à viewport, permanece visível mesmo com scroll)
.position-sticky: position: sticky; (Elemento posicionado como relative até atingir um limite de scroll, então se comporta como fixed)
Bootstrap 5 introduziu utilitários de transformação para centralizar elementos com position: absolute ou fixed.
Para Centralização: Combine .position-absolute (ou fixed) com .top-50, .start-50 e as classes de transformação:
.translate-middle: transform: translate(-50%, -50%); (Centraliza tanto horizontal quanto verticalmente)
.translate-middle-x: transform: translateX(-50%); (Centraliza apenas horizontalmente)
.translate-middle-y: transform: translateY(-50%); (Centraliza apenas verticalmente)
Exemplo de centralização perfeita:
<div class="position-absolute top-50 start-50
translate-middle">.../div >
Controla a ordem de empilhamento de elementos posicionados.
Utilize com moderação e apenas quando necessário para evitar complexidade desnecessária na ordem de empilhamento.
Use essas classes para adicionar bordas a um elemento.
.border: Adiciona borda em todos os lados.
.border-top: Adiciona borda na parte superior.
.border-end: Adiciona borda na parte direita (em LTR).
.border-bottom: Adiciona borda na parte inferior.
.border-start: Adiciona borda na parte esquerda (em LTR).
A cor e a espessura padrão são definidas pelas variáveis do Bootstrap (--bs-border-color e --bs-border-width).
Use essas classes para remover bordas pré-existentes de um elemento.
.border-0: Remove todas as bordas.
.border-top-0: Remove a borda superior.
.border-end-0: Remove a borda direita.
.border-bottom-0: Remove a borda inferior.
.border-start-0: Remove a borda esquerda.
Altere a cor da borda usando as classes de cores de tema do Bootstrap.
.border-primary: Cor primária do tema.
.border-secondary: Cor secundária do tema.
.border-success: Cor de sucesso (verde).
.border-danger: Cor de perigo (vermelho).
.border-warning: Cor de aviso (amarelo).
.border-info: Cor de informação (azul claro).
.border-light: Cor clara.
.border-dark: Cor escura.
.border-white: Cor branca.
Você pode adicionar -subtle (ex: .border-primary-subtle) para cores mais suaves no Bootstrap 5.3+.
Controle a espessura da borda com classes de 1 a 5.
.border-1: border-width: 1px;
.border-2: border-width: 2px;
.border-3: border-width: 3px;
.border-4: border-width: 4px;
.border-5: border-width: 5px;
Estas classes devem ser usadas em conjunto com uma classe de adição de borda (ex: .border .border-3).
.rounded: border-radius: .375rem; (Padrão de arredondamento)
.rounded-0: border-radius: 0; (Sem arredondamento)
.rounded-1: border-radius: .25rem; (Arredondamento pequeno)
.rounded-2: border-radius: .5rem; (Arredondamento médio)
.rounded-3: border-radius: 1rem; (Arredondamento grande)
.rounded-top: Arredonda apenas os cantos superiores.
.rounded-end: Arredonda apenas os cantos direitos (em LTR).
.rounded-bottom: Arredonda apenas os cantos inferiores.
.rounded-start: Arredonda apenas os cantos esquerdos (em LTR).
.rounded-circle: border-radius: 50%; (Cria um círculo/oval perfeito)
.rounded-pill: border-radius: 50rem; (Cria uma forma de pílula)
Ajusta a opacidade da cor da borda. Disponível no Bootstrap 5.3 e superior.
.border-opacity-10: --bs-border-opacity: .1;
.border-opacity-25: --bs-border-opacity: .25;
.border-opacity-50: --bs-border-opacity: .5;
.border-opacity-75: --bs-border-opacity: .75;
.border-opacity-100: --bs-border-opacity: 1; (Padrão)
Use em conjunto com uma classe de cor de borda (ex: .border .border-primary .border-opacity-50).