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
|
1 2 3 4 5 6 |
<h1>Heading1 <span class="label label-default">New</span></h1> <h2>Heading2 <span class="label label-default">New</span></h2> <h3>Heading3 <span class="label label-default">New</span></h3> <h4>Heading4 <span class="label label-default">New</span></h4> <h5>Heading5 <span class="label label-default">New</span></h5> <h6>Heading6 <span class="label label-default">New</span></h6> |
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.
|
1 2 3 4 5 6 |
<span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span> |
Output
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
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.
|
1 |
<button type="button" class="btn btn-primary">Message <span class="badge">32</span></button> |
Output
Badges For Dashboards
To show important notification in the dashboard, you can use badges for the inbox messages, notifications and spam messages.
|
1 2 3 |
<a href="#">Inbox <span class="badge">132</span></a> <a href="#">Notifications <span class="badge">3</span></a> <a href="#">Spam <span class="badge">12</span></a> |
Output
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.
|
1 2 3 4 5 |
<ul class="nav nav-pills"> <li class="active"><a href="#.">Friends <span class="badge">1012</span></a></li> <li><a href="#.">Chats <span class="badge">272</span></a></li> <li><a href="#.">Groups <span class="badge">86</span></a></li> </ul> |
Output