Bootstrap Labels and Badges In this tutorial you will learn how to createCreating Inline Labels
Inline labels are generally used to indicate some valuable information on the web pages such as important notes, warning messages, etc.

The following example will show you how to create inline labels using the Bootstrap.

<h1>Bootstrap heading <span class="label label-default">New</span></h1><h2>Bootstrap heading <span class="label label-default">New</span></h2>
<h3>Bootstrap heading <span class="label label-default">New</span></h3>
<h4>Bootstrap heading <span class="label label-default">New</span></h4>
<h5>Bootstrap heading <span class="label label-default">New</span></h5>

<h6>Bootstrap heading <span class="label label-default">New</span></h6>

— The output of the above example will look something like this:

Bootstrap Inline Labels

There are some contextual classes to emphasize these inline labels.

<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>

 

The output of the above example will look something like this:

Bootstrap Label Emphasis Classes

Creating Inline Badges

Similarly you can create inline badges to provide important notification to the user such as number received or unread messages, number of friend requests etc. They’re most commonly found in email client and social networking websites.

<ul class="nav nav-pills">

<li><a href="#">Home</a></li>


<li><a href="#">Profile</a></li>


<li class="active"><a href="#">Messages <span class="badge">24</span></a></li>

    

<li><a href="#">Notification  <span class="badge">5</span></a></li>

</ul>

Bootstrap Inline Badges