Holla Tech - Learn
Bootstrap 3: Badges & Labels
 

Badges display numerical values associated with an element. To create a badge, use a <span> element with class badge.

This code displays a button with a badge: 

<div class=“container”>
  <button class=“btn”>
    Click <span class=badge>59</span>
  </button>
</div>

 

Labels display other information associated with elements. To create a label, use a <span> element with class label.

Labels must be styled with one of the contextual classes: label-default, label-primary, label-info, label-success, label-warning, label-danger

The following code displays some paragraphs with labels:

<div class=“container”>
  <p>Paragraph
    <span class=label label-primary>Label</span>
  </p>
  <p>Paragraph
    <span class=label label-info>Label</span>
  </p>
</div>

 

TASK:
Test the line of codes in a text editor and play around with the output and see Bootstrap badges and labels in action.

BACK NEXT

CLICK ON THE BUTTON BELOW TO RETURN TO THE BOOTSTRAP 3 MAIN COURSE PAGE. 

BOOTSTRAP 3 MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT