Bootstrap/docs/components/badges.md

layout	title
page	Badges

Badges are indicators for new or unread activity and include support for the active states of our navigation components, links, buttons, and more.

Contents

• Will be replaced with the ToC, excluding the "Contents" header {:toc}

{% 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 %}

• Home 42
• Profile
• Messages 3

{% endexample %}

Buttons

Like active nav links, badges in Bootstrap buttons automatically restyle to better blend into the background.

{% example html %} Large button 4 Button 4 Small button 4 Extra small 4 {% endexample %}