Bootstrap - Badges


What are badges?

Buttons with a number on each of them.

How can we create a badge?

A badge is a button with a number on it.

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

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

When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.

Badges won't self collapse in Internet Explorer 8 because it lacks support for the :empty selector.

Built-in styles are included for placing badges in active states in pill navigations.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License