The notification indicator consists of a circle with a number inside. We call this a pill or a badge. The notification should only be displayed if there is one or more items. Read more about notifications/badges in the UX Guidelines.
Add .badge-sm for the small version.
+99 +99 +99 +99
Adapts to active nav states
<!-- Badges - .badge -->
<span class="badge">+99</span>
<!-- Small version -->
<span class="badge badge-sm">+99</span>
<!-- Color versions -->
<span class="badge badge-info">3</span>
<span class="badge badge-success">42</span>
<span class="badge badge-warning">24</span>
<span class="badge badge-danger">3</span>
<!-- More example section -->
<button class="btn" type="button">
Button <span class="badge">3</span>
</button>
<div class="nav nav-pills nav-pills-primary">
<a class="active" href="">
Active <span class="badge">3</span>
</a>
<a href="">
Normal <span class="badge">42</span>
</a>
...
<a class="disabled" href="">
Disabled <span class="badge">3</span>
</a>
</div>