Badges
A Bootstrap 3 badge is a small, pill-shaped indicator built for exactly one job:
showing a number. Unlike Labels, which come in seven colors for seven different meanings, there is
only one .badge class — no color variants at all. We'll cover the base
class, how it differs from Labels, using it inside nav links and buttons, and finish with a TrailMap
"Reviews" count badge.
The Base Class: .badge
A badge is just an inline element with the single .badge class — no second class to pick a color, because there isn't one:
<span class="badge">4</span>Badges vs. Labels: When to Use Which
| .label | .badge | |
|---|---|---|
| Color variants | Seven: default, primary, success, info, warning, danger | None — always the same gray pill |
| Typical content | A short word: "New", "Beginner Friendly", "Closed" | A number: an unread count, a total |
| Typical home | Next to a heading or piece of text | Inside a nav link, tab, or button |
Rule of thumb: reach for a label when you need to tag something with a colored word, and a badge when you just need to show a count.
Badges Inside Nav Links and Buttons
The most common place to see a badge is tucked inside a nav link or a button, showing how many items are waiting — an inbox count, a cart total, a notification tally:
<ul class="nav nav-pills">
<li class="active"><a href="#">Inbox <span class="badge">42</span></a></li>
<li><a href="#">Archive</a></li>
</ul>
<button type="button" class="btn btn-default">
Messages <span class="badge">7</span>
</button>TrailMap Example: Reviews Count
On a trail's detail page, TrailMap's tab navigation shows how many reviews a trail has collected, right in the "Reviews" tab label:
<!-- TrailMap: trail detail page tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#overview">Overview</a></li>
<li><a href="#reviews">Reviews <span class="badge">12</span></a></li>
<li><a href="#photos">Photos</a></li>
</ul>