bootstrap/docs/components/badges.md
Mark Otto 9f2aeafe85 Merge branch 'master' into derp
Conflicts:
	Gruntfile.js
	dist/css/bootstrap-theme.css.map
	dist/css/bootstrap.css
	dist/css/bootstrap.css.map
	dist/css/bootstrap.min.css
	dist/fonts/glyphicons-halflings-regular.svg
	docs/_includes/components/badges.html
	docs/_includes/components/input-groups.html
	docs/_includes/components/pagination.html
	docs/_includes/css/forms.html
	docs/_includes/footer.html
	docs/_includes/getting-started/browser-device-support.html
	docs/_includes/getting-started/grunt.html
	docs/_includes/home-nav.html
	docs/_includes/js/alerts.html
	docs/_includes/js/buttons.html
	docs/_includes/js/carousel.html
	docs/_includes/js/collapse.html
	docs/_includes/js/modal.html
	docs/_includes/js/popovers.html
	docs/_includes/js/tooltips.html
	docs/_includes/nav/getting-started.html
	docs/_includes/nav/javascript.html
	docs/assets/css/docs.min.css
	docs/assets/css/src/docs.css
	docs/assets/js/customize.min.js
	docs/assets/js/raw-files.min.js
	docs/browser-bugs.html
	docs/dist/css/bootstrap-theme.css.map
	docs/dist/css/bootstrap.css
	docs/dist/css/bootstrap.css.map
	docs/dist/css/bootstrap.min.css
	docs/dist/fonts/glyphicons-halflings-regular.svg
	fonts/glyphicons-halflings-regular.svg
	less/_button-group.less
	less/_jumbotron.less
	less/_variables.less
	less/mixins/vendor-prefixes.less
	less/panels.less
	less/thumbnails.less
	package.json
2014-09-17 15:21:31 -07:00

1.5 KiB

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.

{% 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 %} Large button 4 Button 4 Small button 4 Extra small 4 {% endexample %}