I badges in Bootstrap sono piccoli elementi che possono essere posti accanto ad altri elementi per mettere in evidenza la presenza quacosa "di nuovo" come, ad esempio, il numero di messaggi non letti in un ipotetico sistema di messaggistica on-line.
L’esempio più semplice consiste nell’associare un badge ad un link:
<a href="#">Messaggi <span class="badge">6</span></a>
Quando non contengono alcun valore i badge si nascondo automaticamente, tranne in Internet Explorer 8 che non gestisce il selettore CSS 3 :empty, usato per ottenere questo effetto.
Naturalmente, Bootstrap permette di inserire i badge in elementi più complessi come le barre di navigazione. Quando la barra è ridotta per le dimensioni del dispositivo in cui è visualizzata, il badge si nasconde se l’elemento a cui è legato si nasconde, quindi viene (ri)visualizzato, quando la barra è espansa.
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav " >
<li class="active"><a href="#">Messaggi <span class="badge">42</span></a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
