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:

Bootstrap Button Badge

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

Bootstrap Contextual class badge example

Bootstrap badge Pill

Bootstrap badge size

Bootstrap badges with icons

Bootstrap  badges with icons

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.

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

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.

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