---
layout: page
title: Badges
---
Easily highlight new or unread items by adding a `` within links, Bootstrap navs, and more.
{% example html %}
Inbox 42
{% endexample %}
### Self collapsing
When there are no new or unread items, badges will simply collapse (via CSS's `:empty` selector) provided no content exists within.
### Active nav
Built-in styles are included for placing badges in active states in pill navigations.
{% example html %}
{% endexample %}
### Buttons
Like active nav links, badges in Bootstrap buttons automatically restyle to better blend into the background.
{% example html %}
{% endexample %}