Bootstrap Labels & Badges

Creating Bootstrap Labels

Bootstrap labels are used to show valuation information for users. You can use labels to display additional information like tips, opportunities to the user visiting your website.

If some updates to events happening to your website, you can display them by using the bootstrap labels. Below is the example of the headings with the labels. You can specify a label by using the class .label

Test it Live


Heading1 New

Heading2 New

Heading3 New

Heading4 New

Heading5 New
Heading6 New

Contextual Label Classes

You can also create colored labels using the bootstrap contextual classes for labels. These classes are .label-default, .label-primary, .label-success, .label-info, .label-warning and .label-danger.

See the bootstrap label color created by each classes in the given example.

Test it Live



The above example creates bootstrap label color using its same contextual classes.

One thing you should notice here, bootstrap does not provide any class to change the bootstrap label size. However, you can change the bootstrap label size by using the CSS font-size property.

How to Create Bootstrap Badge

If you want to show your users the important notifications like number inbox messages, notifications for your website.

You can also find the live example of using the badges on your Gmail account. Inbox, sent items, spam message contains the badges to display to users as important notifications

Bootstrap Button Badge

Use badges inside the buttons to show your important notification to the users.

To create a badge, you have to use the class .badge as the class of <span> element.

Test it Live


Badges For Dashboards

To show important notification in the dashboard, you can use badges for the inbox messages, notifications and spam messages.

Test it Live


Inbox 132
Notifications 3
Spam 12

Create Badges For Menu Items

If are using the Facebook social networking site, you can find the important notifications like friend requests, chats, groups and others.

You can use the Bootstrap nav pills to display the important notifications.

Test it Live