0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-12 00:08:59 +01:00
Bootstrap/docs/components/badges.md

57 lines
1.6 KiB
Markdown
Raw Normal View History

2014-07-12 07:34:47 +02:00
---
layout: page
title: Badges
---
2014-08-06 02:16:28 +02:00
Badges are indicators for new or unread activity and include support for the active states of our [navigation components](/components/navs/), links, buttons, and more.
2014-07-12 07:34:47 +02:00
2015-05-29 10:58:52 +02:00
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
2014-07-12 07:34:47 +02:00
{% example html %}
<a href="#">Inbox <span class="badge">42</span></a>
{% 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 %}
<ul class="nav nav-pills" role="tablist">
<li class="nav-item active" role="presentation">
<a class="nav-link" href="#">Home <span class="badge">42</span></a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" href="#">Messages <span class="badge">3</span></a>
</li>
</ul>
{% endexample %}
### Buttons
Like active nav links, badges in Bootstrap buttons automatically restyle to better blend into the background.
{% example html %}
<button class="btn btn-primary btn-lg" type="button">
Large button <span class="badge">4</span>
</button>
<button class="btn btn-primary" type="button">
Button <span class="badge">4</span>
</button>
<button class="btn btn-primary btn-sm" type="button">
Small button <span class="badge">4</span>
</button>
<button class="btn btn-primary btn-xs" type="button">
Extra small <span class="badge">4</span>
</button>
{% endexample %}