Badges

Use badges to show unread content, or highlighting new content.

Usage

Use badges within a navigation, buttons, list groups, and more.

EXAMPLE

<button class="btn btn-default">Default Button<span class="badge">29</span></button>
<button class="btn btn-primary">Primary Button<span class="badge">7</span></button>
<button class="btn btn-success">Success Button<span class="badge">New</span></button>
<button class="btn btn-danger">Danger Button<span class="badge">Error</span></button>

List Group Badges

Use badges inside of list groups. Add a modifier to change the color of the badge. For example add the class success and the badge with inherit the success properties.

Add the helper class right-float to float the badges to the right

Badge w/ active state Active Default Badge 2 Primary Badge 2 Success Badge 12 Info Badge 32 Warning Badge 442 Danger Badge 2

<div class="list-group">
  <a class="list-group-element active">Badge w/ active state <span class="badge right-float">Active</span></a>
  <a class="list-group-element">Default Badge <span class="badge right-float">2</span></a>
  <a class="list-group-element">Primary Badge <span class="badge primary right-float">2</span></a>
  <a class="list-group-element">Success Badge <span class="badge success right-float">12</span></a>
  <a class="list-group-element">Info Badge <span class="badge info right-float">32</span></a>
  <a class="list-group-element">Warning Badge <span class="badge warning right-float">442</span></a>
  <a class="list-group-element">Danger Badge <span class="badge danger right-float">2</span></a>
</div>