Labels & Badges

Highlight inline small pieces of information.


Add any of the below mentioned modifier classes to change the appearance of a label. Inherits the font size.

Example heading 1 New

Example heading 2 New

Example heading 3 New

Example heading 4 New

Example heading 5 New

Example heading 6 New

Default Primary Success Info Warning Danger
<h1>Example heading 1 <span class="label label-default">New</span></h1>
<h2>Example heading 2 <span class="label label-primary">New</span></h2>
<h3>Example heading 3 <span class="label label-danger">New</span></h3>
<h4>Example heading 4 <span class="label label-success">New</span></h4>
<h5>Example heading 5 <span class="label label-warning">New</span></h5>
<h6>Example heading 6 <span class="label label-info">New</span></h6>


Easily highlight new or unread items by adding a <span class="badge"> to links, navs, and more.

Use the modifier classes .badge-info, .badge-success, .badge-warning, .badge-danger and .badge-brand to change the background color.

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

Inbox 42

<a href="#">Inbox <span class="badge">42</span></a><br>
<button type="button" class="btn btn-default">Button <span class="badge badge-info">3</span></button>