BadgesPRO

Add labels to your content using badges.

Badges scale to match the size of the immediate parent element by using relative font sizing and em units and are styled according to their contextual class,.badge-{color}, where color may be any color from the color palette.

Example heading New

Example heading Warning


<h3>Example heading <span class="badge badge-primary">New</span></h3>
<h4>Example heading <span class="badge badge-danger">Warning</span></h4>

Badges can be used as part of links or buttons to provide a counter.


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

Alternatively, position the badge on the edge of the button using the .badge-counter class.

Comments 24


<div class="badge-counter">
	<a href="" class="btn btn-comments"><i class="fa fa-comments"></i> Comments</a>
	<span class="badge badge-danger badge-pill">24</span>
</div>

Pill badges

Use the .badge-pill class to make badges more rounded.

Primary Secondary Success Danger Warning Info Light Dark


<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

Links

You can apply the .badge and .badge-{color} classes on an <a> element to provide actionable badges with hover and focus states.