Search within TutorialsPark

Twitter Bootstrap Badges


To create badges to denote new or unread items


Twitter Bootstrap: Badges

1. A badge is used to highlight new or unread items, it can be created using class .badge to <a> links.

2. If no content is available with the element, the badges will collapse simply.

Example: Twitter Bootstrap Badges

Give it a TRY! »

Twitter Bootstrap: Badges on Navigation Pills

1. Built-in styles are available inorder to place bagdes in navigation pills with active states .

Example:Twitter Bootstrap Badges on Navigation Pills

Give it a TRY! »

Twitter Bootstrap: Badges on Vertical Pill Navigations

1. Attractive navigation with functionality can be created by including badges within vertical navigation pills.

Example:Twitter Bootstrap Badges on Vertical Pill Navigation

Give it a TRY! »

Twitter Bootstrap : Badges on Buttons

1. Badges can be created within a button by using class .badge with <span> within <button> element

Example:Twitter Bootstrap Badges on Buttons

Give it a TRY! »

Twitter Bootstrap : Different types of badges

1. You can create multiple types of badges using class .badge-* to denote various types of badges.

2. The variations available are

.badge-success to denote success

.badge-warning to denote a potentially negative content

.badge-important to denote an important message

.badge-info to denote information

.badge-inverse to inverse color of the background

Example:Twitter Bootstrap Badges on Buttons

Give it a TRY! »