Spesso capita di dover mostrare un testo con accanto un numero. Un tipico caso in cui questa funzionalità torna utile quando si vuole mostrare all'utente ilnumero di messaggi ricevuti, o di notifiche pending, o di email in coda o altro ancora. Questi indicatori vengono definiti Badge e sono molto diffusi nel web moderno.
Bootstrap fornisce già degli stili CSS per creare badge quindi possiamo crearne uno utilizzando il seguente codice HTML.

<button class="btn btn-primary" type="button">
  Inbox <span class="badge">4</span>
</button>

Il testo contenuto nel bottone è quello che indica il soggetto del badge (la inbox in questo caso), mentre il numero contenuto nello span con classe badge rappresenta il numero a cui dare risalto (il numero di email non lette in questo caso). Gestendo il click sul pulsante possiamo anche navigare alla pagina della inbox.

Questa tecnica può essere usata non solo per i pulsanti, ma anche per i link come mostrato nel seguente codice HTML:

<a href="inbox">Inbox <span class="badge">42</span></a>