Badges and labels in Bootstrap

How to create badges and labels using Bootstrap?

Badges

Badges are the numerical indicators which used to highlight new or unread items. To use badges just add <span class = "badge">

 <div class="well">
        <h2>Badges</h2>
        <a href="#">TechFunda<span class="badge">1</span></a><br>
        <a href="#">DotNetFunda <span class="badge">2</span></a><br>
        <a href="#">ITFunda<span class="badge">3</span></a>
    </div>

In the above code snippet we have created badges , we have used span class to define the badge

output

Badges with buttons

We can create badges in buttons using <button>

<h2>Badges with buttons</h2>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">TechFunda<span class="badge">1</span></button>
        <button type="button" class="btn btn-success">DotNetFunda<span class="badge">2</span></button>
        <button type="button" class="btn btn-default">ITFunda<span class="badge">3</span></button>
    </div>

Badges with buttons

In the above code snippet we have defined the badges with buttons ,we have taken the button to define the badge with colors as primary, success and default color and in that button we have defined the span class to define the badge

output

Labels

Labels are used as mark up for the pages, It uses class .label to define a label, we have six different colors to define the labels

 <div class="container">
        <h2>Labels</h2>
         <span class="label label-default">TechFunda</span>
         <span class="label label-primary">DotNetFunda</span>
         <span class="label label-success">ITFunda</span>
         <span class="label label-danger">KidsFunda</span>
         <span class="label label-info">FarmingFunda</span>
         <span class="label label-warning">Fundoovideo</span>       
    </div>

Label

In the above code snippet we have defined the labels using different colors as default, primary, success, danger, info, warning

output