Botões
Os botões seguem uma estrutura simples baseada na classe .btn e em variações de cor.
Botões Básicos
<button class="btn btn-primary">Primário</button>
<button class="btn btn-secondary">Secundário</button>
<button class="btn btn-success">Sucesso</button>
<button class="btn btn-danger">Perigo</button>
<button class="btn btn-warning">Aviso</button>
<button class="btn btn-info">Informação</button>
<button class="btn btn-light">Claro</button>
<button class="btn btn-dark">Escuro</button>
Botões de Link
<a href="#" class="btn btn-primary">Link como botão</a>
Tamanhos de Botões
<button class="btn btn-primary btn-lg">Grande</button>
<button class="btn btn-primary btn-sm">Pequeno</button>
Botões em Estado de Desabilitado
<button class="btn btn-primary" disabled>Desabilitado</button>
Botões Outline (Apenas Borda)
<button class="btn btn-outline-primary">Primário</button>
<button class="btn btn-outline-success">Sucesso</button>
<button class="btn btn-outline-danger">Perigo</button>
Badges (Etiquetas)
As badges são etiquetas pequenas, usadas geralmente para indicar contagens, status ou pequenos destaques.
Badge Inline com Texto
<h1>Notificações <span class="badge bg-primary">4</span></h1>
Badge como Pílula
<span class="badge rounded-pill bg-success">Novo</span>
Variações de Cores
<span class="badge bg-primary">Primário</span>
<span class="badge bg-secondary">Secundário</span>
<span class="badge bg-danger">Perigo</span>
<span class="badge bg-warning text-dark">Aviso</span>
<span class="badge bg-info">Informação</span>
<span class="badge bg-dark">Escuro</span>
Alerts (Caixas de Alerta)
As caixas de alerta servem para informar o usuário sobre ações, status ou notificações importantes.
Alertas Básicos
<div class="alert alert-primary">Este é um alerta primário.</div>
<div class="alert alert-success">Sucesso!</div>
<div class="alert alert-danger">Algo deu errado.</div>
<div class="alert alert-warning">Atenção!</div>
<div class="alert alert-info">Informação importante.</div>
<div class="alert alert-dark">Alerta escuro.</div>
Alertas com Conteúdo Rico
<div class="alert alert-success">
<h4 class="alert-heading">Sucesso!</h4>
<p>Você realizou a ação corretamente.</p>
<hr>
<p class="mb-0">Continue navegando.</p>
</div>
Alertas Dispensáveis (Com Botão Fechar)
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Atenção!</strong> Este é um alerta que pode ser fechado.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
Esses componentes são essenciais em praticamente qualquer interface, seja para navegação, feedback do sistema ou para destacar informações importantes.