Bootstrap 5 Badges [Learn with 8 Examples]

Bootstrap 5 Badges – A Count and labeling component

The badges in Bootstrap 5 can be used for:

• A small component to show the count of something. For example, showing the number of messages in the inbox with a button.
• A generic indicator, e.g. showing an indication of new posts in the newsfeed.
• Can also act as a labeling component etc.

How to create badges?

Badges can be created by assigning .badge class to an element, normally span. This span tag can be used separately or attached with other elements like buttons, heading tags, etc.

See the examples below for badges in Bootstrap 5 with various styles.

Using badges with headings example

Badges can be used with headings tags (h1 to h6) as a way to show some information standing out with the heading.

See an example below where all six headings are used with the badge. A span tag with .badge class is used as follows:

BS 5 code:

Using a few context classes to colorize badges

In the above example, the .bg-secondary class is used as the background color for the badge. In this example, we used various available context classes to colorize the badges. See the code/output below:

Output:

An example of using badges with buttons

You may also use badges with buttons. See an example below where we used single color for buttons and badges:

An example of using various color badges and button

The following example uses different color buttons with badges:

Using badges with links

Similarly, you may create badges with links and style them by using available contextual classes. An example below shows how:

Setting the position of the badge with a button example

In this example, the badges are set toward different positions. One is towards the right top, another is right bottom and the third one is top left.

You may set the position by using utilities as shown in the example below:

Creating a circle badge example

You may also create a circle badge as well.

An example of using the rounded-pill utility for a pill badge

By using .rounded-pill utility class with .badge, you may create badges more rounded with a larger border-radius. Have a look at an example below: