Bootstrap 4 Emblemas
Exemplo de título Novo
Exemplo de título Novo
Exemplo de título Novo
Exemplo de título Novo
Exemplo de título Novo
Exemplo de título Novo
Os emblemas são usados para adicionar informações adicionais a qualquer conteúdo. Use a .badgeclasse junto com uma classe contextual (como .badge-secondary) dentro <span>
de elementos para criar emblemas retangulares. Observe que os emblemas são dimensionados para corresponder ao tamanho do elemento pai (se houver):
Exemplo
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
Emblemas contextuais
Primário
Secundário
Sucesso
Perigo
Aviso
Informações
Leve
Escuro
Use qualquer uma das classes contextuais ( .badge-*) para alterar a cor de um emblema:
Exemplo
<span class="badge badge-primary">Primary</span>
<span class="badge
badge-secondary">Secondary</span>
<span class="badge
badge-success">Success</span>
<span class="badge
badge-danger">Danger</span>
<span class="badge
badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge
badge-dark">Dark</span>
Emblemas de pílula
Primário
Secundário
Sucesso
Perigo
Aviso
Informações
Leve
Escuro
Use a .badge-pillclasse para deixar os emblemas mais redondos:
Exemplo
<span class="badge badge-pill badge-primary">Primary</span>
<span
class="badge badge-pill badge-secondary">Secondary</span>
<span
class="badge badge-pill badge-success">Success</span>
<span class="badge
badge-pill badge-danger">Danger</span>
<span class="badge badge-pill
badge-warning">Warning</span>
<span class="badge badge-pill
badge-info">Info</span>
<span class="badge badge-pill
badge-light">Light</span>
<span class="badge badge-pill
badge-dark">Dark</span>
Crachá dentro de um elemento
Um exemplo de uso de um emblema dentro de um botão:
Exemplo
<button type="button" class="btn btn-primary">
Messages <span
class="badge badge-light">4</span>
</button>