Bootstrap Badges & Labels
Badges
Bootstrap Badges are numerical indicators used to show that how many items are associated with the specific link. Badges are used to highlight new or unread items.
Use the .badge class within <span> elements to create badges
Example
<a href="#">Blogs <span class="badge">5</span></a><br>
<a href="#">News <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>
You can also use badges inside other elements, such as buttons.
<button type="button" class="btn btn-primary">Blogs <span class="badge">7</span></button>
<button type="button" class="btn btn-success">News <span class="badge">7</span></button>
<button type="button" class="btn btn-danger">Comments <span class="badge">7</span></button>
Labels
Bootstrap labels are used to specify the additional information about something like offering counts, tips, or other makeup for pages.
Use the .label class, followed by one of the six contextual classes
- .label-default
- .label-primary
- .label-success
- .label-info
- .label-warning
- .label-danger
<span class = "label label-success">Success Label</span>
<span class = "label label-info">Info Label</span>
<span class = "label label-danger">Danger Label</span>
<span class = "label label-default">Default Label</span>
<span class = "label label-primary">Primary Label</span>
<span class = "label label-warning">Warning Label</span>
