Folha de referência Bootstrap
Uma referência Bootstrap 5.3 pesquisável e imprimível — grelha, espaçamento, tipografia, cores, utilitários flex, botões, formulários e componentes. Grátis.
Grelha e layout
12<div class="container">
Contentor responsivo de largura fixa
<div class="container-fluid">
Contentor de largura total em todos os breakpoints
<div class="container-md">
100% de largura até ao breakpoint md
<div class="row">
Linha da grelha, contém colunas
<div class="col">
Coluna automática de largura igual
<div class="col-6">
Ocupa 6 de 12 colunas
<div class="col-md-4">
4 colunas a partir do breakpoint md
<div class="col-auto">
Coluna dimensionada ao seu conteúdo
<div class="offset-md-2">
Empurra a coluna 2 colunas para a direita
<div class="row g-3">
Espaçamento de gutter entre colunas
<div class="row row-cols-3">
Força 3 colunas iguais por linha
<div class="order-2">
Reordena uma coluna flex/grid
Utilitários de espaçamento
12m-3
Margem em todos os lados (escala 0-5)
mt-2
Margem superior
mx-auto
Margens horizontais automáticas para centrar
p-4
Preenchimento em todos os lados
py-2
Preenchimento vertical (topo e fundo)
ms-3
Margem inicial (esquerda em LTR, ciente de RTL)
me-3
Margem final (direita em LTR, ciente de RTL)
ps-2
Preenchimento inicial, ciente de RTL
pe-2
Preenchimento final, ciente de RTL
gap-3
Espaço entre itens flex/grid
m-n1
Margem negativa
p-md-5
Preenchimento responsivo a partir de md
Tipografia
14<h1>..<h6>
Níveis de título com estilo padrão
<p class="display-1">
Título de exibição grande (display-1..6)
<p class="lead">
Parágrafo de destaque (lead)
fw-bold
Peso de fonte negrito
fw-semibold
Peso de fonte semi-negrito
fst-italic
Estilo de fonte itálico
text-center
Alinha o texto ao centro
text-start
Alinha o texto ao início, ciente de RTL
text-end
Alinha o texto ao fim, ciente de RTL
text-truncate
Trunca o overflow com reticências
text-uppercase
Transforma o texto em maiúsculas
fs-1
Tamanho de fonte responsivo (fs-1..6)
lh-base
Altura de linha base (lh-1, lh-sm, lh-lg)
font-monospace
Família de fonte monoespaçada
Cores e fundo
10text-primary
Cor de texto primária
bg-primary
Cor de fundo primária
bg-primary-subtle
Tonalidade subtil de fundo primário
text-primary-emphasis
Texto primário em destaque, ciente do tema
text-bg-primary
Fundo primário com texto de contraste automático
link-primary
Auxiliar de link colorido
bg-opacity-50
Aplica 50% de opacidade de fundo
text-body-secondary
Texto secundário do corpo esbatido
text-body-emphasis
Texto do corpo de alto destaque
border-primary-subtle
Cor de borda primária subtil
Utilitários flex
10d-flex
Criar um contêiner flex
flex-row
Dispõe os itens em linha
flex-column
Dispõe os itens em coluna
justify-content-between
Espaça os itens ao longo do eixo principal
align-items-center
Centra os itens no eixo transversal
flex-wrap
Permitir que os itens quebrem linha
flex-grow-1
Deixa um item crescer para preencher o espaço
flex-fill
Força larguras flexíveis iguais
align-self-end
Alinha um único item ao fim
flex-md-row
Direção flex responsiva a partir de md
Display e posição
12d-none
Oculta o elemento
d-md-block
Mostra como bloco a partir do breakpoint md
position-relative
Posicionamento relativo
position-absolute
Posicionamento absoluto
position-fixed
Posicionamento fixo
position-sticky
Posicionamento sticky
top-0 start-0
Fixa no canto superior esquerdo, ciente de RTL
translate-middle
Centra via transform translate
fixed-top
Fixa o elemento no topo do viewport
sticky-top
Fixa no topo ao rolar
z-3
Define o z-index (z-0..3)
invisible
Oculta mas mantém o espaço de layout
Dimensionamento e bordas
12w-100
Largura 100% do pai
w-50
Largura 50% do pai
h-100
Altura 100% do pai
mw-100
Largura máxima 100%
vh-100
Altura 100% do viewport
border
Adiciona uma borda padrão em todos os lados
border-0
Remove todas as bordas
border-primary
Colore a borda
rounded
Border-radius padrão
rounded-pill
Forma de pílula totalmente arredondada
rounded-circle
Border-radius circular
shadow-sm
Sombra de caixa pequena (shadow, shadow-lg)
Botões
9<button class="btn btn-primary">
Botão primário sólido
<button class="btn btn-outline-primary">
Variante de botão de contorno
<button class="btn btn-lg">
Botão grande (também btn-sm)
<button class="btn btn-link">
Botão estilizado como link
<button class="btn-close">
Botão de fechar genérico (×)
<button class="btn disabled">
Estado de botão desativado
<button class="btn active">
Estado de botão ativo
<div class="d-grid"><button class="btn">
Botão de bloco de largura total via d-grid
<div class="btn-group">
Agrupa botões
Formulários
11<input class="form-control">
Input de texto estilizado
<label class="form-label">
Rótulo de campo de formulário
<select class="form-select">
Dropdown select estilizado
<div class="form-check">
Wrapper de checkbox/radio
<input class="form-check-input">
Input de checkbox ou radio estilizado
<div class="form-check form-switch">
Componente de interruptor (toggle)
<input class="form-control-lg">
Input grande (também form-control-sm)
<div class="input-group">
Agrupa inputs com complementos
is-invalid
Estado de validação inválido (is-valid)
<div class="form-floating">
Input com rótulo flutuante
col-form-label
Rótulo alinhado para formulários horizontais
Componentes
14<div class="card">
Cartão de conteúdo flexível
<nav class="navbar navbar-expand-lg">
Barra de navegação responsiva
data-bs-toggle="modal" data-bs-target="#m"
Aciona um diálogo modal
data-bs-toggle="dropdown"
Alterna um menu dropdown
data-bs-toggle="collapse"
Alterna um elemento recolhível
<div class="accordion">
Painéis recolhíveis empilhados
<div class="alert alert-dismissible">
Mensagem de alerta dispensável
<span class="badge text-bg-primary">
Pequeno badge de contagem ou rótulo
<ul class="list-group">
Lista de itens estilizada
<ul class="nav nav-tabs">
Navegação por separadores
<div class="toast">
Notificação toast leve
<div class="offcanvas">
Painel lateral off-canvas
<div class="spinner-border">
Indicador de carregamento (spinner)
<nav><ul class="pagination">
Links de navegação paginada
Auxiliares e diversos
11data-bs-theme="dark"
Ativa o modo de cor escuro num escopo
<div class="ratio ratio-16x9">
Caixa de proporção responsiva
visually-hidden
Oculta visualmente, mantém para leitores de ecrã
visually-hidden-focusable
Oculto até receber foco (skip links)
stretched-link
Torna um pai totalmente clicável
clearfix
Limpa filhos flutuados
<div class="vstack gap-2">
Pilha vertical de elementos
<div class="hstack gap-2">
Pilha horizontal de elementos
<a class="icon-link">
Link alinhado com um ícone inline
<div class="progress">
Contentor de barra de progresso
<nav class="breadcrumb">
Trilho de navegação breadcrumb
Nenhuma entrada corresponde a “:q”.
Precisa de ajuda?
Encontrou um problema com esta ferramenta? Avise a nossa equipa.