Bootstrap Badges and Labels

Bootstrap Badges

Bootstrap Badges are useful in almost all kinds of different websites now. They are, basically, numerical indicators that help us show the number of items associated a specific link.

For examples, a typical use of badges is to notify the number of unread messages in your inbox.

A basic can be added by using the .badge classes with the <span> element. See the sample code below for illustration:

        Badges
        
        News 5
  
        Comments 10
  
        Updates 2

Try It

Bootstrap Button Badge

The example below will tell you how to use badges with some buttons:

 Badges on Buttons

Try It

Bootstrap Contextual class badge example

        Primary
        Secondary
        Success
        Danger
        Warning
        Info
        Light
        Dark

Try It

Bootstrap badge Pill

         
            Inbox 500
            Read 400
            Unread 10
            Spam 10
            Trace 10

Try It

Bootstrap badge size

 Badges Example
        
        Exciting Offers New
        Exciting Offers New
        Exciting Offers New
        Exciting Offers New
        Exciting Offers New

Try It

Bootstrap badges with icons

Try It

Bootstrap Labels

The labels are different from badges in the sense that they are generally non-numerical and tells you about the element itself rather than the items it is holding. They can be used for offering tips, counts etc.

The class .label can be used to add labels to your page.

  Update New  
  UpdateNew  
  Update New  
  UpdateNew  
  UpdateNew  
  UpdateNew

Try It

The label colors can also be changed by using the following contextual label classes:

label-default
label-primary
label-success
label-info
label-warning
label-danger

   
  
  
  Bootstrap Contextual Label  
    
    
   
  
   
  
  Contextual Label Classes   
  Default Label  
  Primary Label  
  Success Label  
  Info Label  
  Warning Label  
  Danger Label

Badges Headings

You can also use Badges with the heading tags (<h1>……<h6>). For this, along with the .badge you also need to use the .badge-secondary class within <span> elements>.

This will help creating rectangular badges.

   
  
  
  Bootstrap Example  
    
    
    
    
    
    
  
  
  
  Badges Example  
  h1 heading New  
  h2 heading New  
  h3 heading New  
  h4 heading New  
  h5 heading New  
  h6 heading New

Contextual Badges

Here’s a list of contextual classes for colored badges:

badge-primary
badge-secondary
badge-success
badge-danger
badge-warning
badge-info
badge-light
badge-dark

   
  
  
  Bootstrap Example  
    
    
    
    
    
    
  
  
  
  Contextual Badges Example  
  Primary Badge  
  Secondary Badge  
  Success Badge  
  Danger Badge  
  Warning Badge  
  Info Badge  
  Light Badge  
  Dark Badge