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

Output

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.

Output

Default Primary Success Info Warning Danger

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

Createbootstrap 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> tag.

Output

Create badges For Dashboards

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

Output

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.

Output

References
Getbootstrap Labels
Getbootstrap Badges

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.