Bootstrap Labels and Badges

Creating 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 Twitter Bootstrap
Example

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

Bootstrap heading New

Bootstrap heading New

Bootstrap heading New

Bootstrap heading New

 

Bootstrap heading New

There are some contextual classes to emphasize these inline labels.
Example

    <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:
Default
Primary
Success
Info
Warning
Danger

Creating Inline Badges

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

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

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

Badges
Notice that we have use bootstrap-2.0.3.css for this example, since styles for badges are not available in Bootstrap v2.0.1

<div class="container">  
<div class="row">  
<div class="span12">  
<p><span class="badge">1</span></p>  
<p><span class="badge badge-success">2</span></p>  
<p><span class="badge badge-warning">4</span></p>  
<p><span class="badge badge-important">6</span></p>  
<p><span class="badge badge-info">8</span></p>  
<p><span class="badge badge-inverse">10</span></p>  
</div>  
</div>  
</div>  

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

1

2

4

6

8

10

youjizz

Admin has written 171 articles