Bootstrap labels and badges

In this we will discuss Bootstrap labels and badges components. 

Bootstrap tutorial for beginners

The label component is useful for providing important additional information. For example, we can use labels to let the user know whether if a course is new or if it is beginner, intermediate or advanced level. 
bootstrap label example 

<div class="well">
    <h3>Dot Net Courses from PragimTech</h3>
    <hr />
    <h4>C# <span class="label label-default">Beginner</span></h4>
    <h4>ASP.NET <span class="label label-default">Beginner</span></h4>
    <h4>ADO.NET <span class="label label-default">Intermediate</span></h4>
    <h4>WCF <span class="label label-default">Advanced</span></h4>
    <h4>Bootstrap <span class="label label-default">New</span></h4>

Contextual state classes : In the example above we have used label-default class, which applied default contextual styling to the label. The following contextual state classes can also be used.
bootstrap label color change 

<div class="well">
    <h3>Dot Net Courses from PragimTech</h3>
    <hr />
    <h4>C# <span class="label label-primary">Beginner</span></h4>
    <h4>ASP.NET <span class="label label-info">Beginner</span></h4>
    <h4>ADO.NET <span class="label label-success">Intermediate</span></h4>
    <h4>WCF <span class="label label-danger">Advanced</span></h4>
    <h4>Bootstrap <span class="label label-warning">New</span></h4>

All headings <h1> through <h6> can be used with bootstrap label component 
bootstrap heading label 

<div class="well">
    <h1>Dot Net Courses from PragimTech</h1>
    <hr />
    <h2>C# <span class="label label-primary">Beginner</span></h2>
    <h3>ASP.NET <span class="label label-info">Beginner</span></h3>
    <h4>ADO.NET <span class="label label-success">Intermediate</span></h4>
    <h5>WCF <span class="label label-danger">Advanced</span></h5>
    <h6>Bootstrap <span class="label label-warning">New</span></h6>

The badge component is useful for providing important notifications like number of new messages in your email inbox. 
twitter bootstrap badge example 

<a href="#">Inbox <span class="badge">10</span></a><br />
<a href="#">Sent <span class="badge">2</span></a><br />
<a href="#">Spam <span class="badge">3</span></a><br />
<a href="#">Trash <span class="badge">5</span></a>

Using badge component with buttons : The badge component can also be used with other elements such as a button. When used with the button, the badge component has the capability to adapt to the contextual state class used on the button. 
twitter bootstrap badge button 

<button class="btn btn-primary">Inbox <span class="badge">10</span></button>
<button class="btn btn-warning">Sent <span class="badge">2</span></button>
<button class="btn btn-success">Spam <span class="badge">3</span></button>
<button class="btn btn-info">Trash <span class="badge">5</span></button>