What are Badges in Bootstrap?

Bootstrap is a CSS framework built with a collection of HTML, CSS, and JavaScript tools used for building scalable web applications.

A Badge is a component that provides additional information about something or is used as an indicator about certain information.

Here is an example:

By using the class="badge", we create a rectangular shape. we can also create different colors of badge using the bootstrap tags for different colors.

  • class="badge bg-primary" - is for blue badge color

  • class="badge bg-secondary" - is for grey badge color

  • class="badge bg-success" - is for green badge color

  • class="badge bg-danger" - is for red badge color

  • class="badge bg-warning" - is for yellow badge color

  • class="badge bg-info" - is for skyblue badge color

Code sample

We will create a file and name it home.html. We can see this here:

Badges will be used here as an indicator for alerting purposes.

We are going to use badge to indicate numbers in the HTML button tag:

home.html

Free Resources