Balança Bootstrap 5

Distintivos

Distintivos (Badges) são usados para adicionar informações adicionais ao conteúdo:

em <span> no elemento .badge e classes de contexto (como

Exemplo

<h1>Exemplo de cabeçalho <span class="badge bg-secondary">Novo</span></h1>
<h2>Exemplo de cabeçalho <span class="badge bg-secondary">Novo</span></h2>
<h3>Exemplo de cabeçalho <span class="badge bg-secondary">Novo</span></h3>
<h4>Exemplo de cabeçalho <span class="badge bg-secondary">Novo</span></h4>
<h5>Exemplo de cabeçalho <span class="badge bg-secondary">Novo</span></h5>
<h6>Exemplo de cabeçalho <span class="badge bg-secondary">Novo</span></h6>

Experimente pessoalmente

Distintivo de Contexto

Use qualquer classe de contexto (.bg-*) Mude a cor do distintivo:

Exemplo

<span class="badge bg-primary">Principal</span>
<span class="badge bg-secondary">Secundário</span>
<span class="badge bg-success">Sucesso</span>
<span class="badge bg-danger">Perigo</span>
<span class="badge bg-warning">Aviso</span>
<span class="badge bg-info">Informação</span>
<span class="badge bg-light">Claro</span>
<span class="badge bg-dark">Escuro</span>

Experimente pessoalmente

Insígnia cápsula

Uso .rounded-pill Classe arredonda a insígnia:

Exemplo

<span class="badge rounded-pill bg-primary">Principal</span>
<span class="badge rounded-pill bg-secondary">Secundário</span>
<span class="badge rounded-pill bg-success">Sucesso</span>
<span class="badge rounded-pill bg-danger">Perigo</span>
<span class="badge rounded-pill bg-warning">Aviso</span>
<span class="badge rounded-pill bg-info">Informação</span>
<span class="badge rounded-pill bg-light">Claro</span>
<span class="badge rounded-pill bg-dark">Escuro</span>

Experimente pessoalmente

Insígnia dentro do elemento

Exemplo de uso de insígnia dentro de botão:

Exemplo

<button type="button" class="btn btn-primary">
  Mensagem <span class="badge bg-danger">4</span>
</button>

Experimente pessoalmente