Hit enter after type your search item

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.

Quick Demos Online

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:

See online demo and code

Bootstrap5-badges

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:

See online demo and code

BS5-badges-color

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:

See online demo and code

BS5-badges-button

An example of using various color badges and button

The following example uses different color buttons with badges:

See online demo and code

BS5-badges-button-colo

Using badges with links

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

See online demo and code

BS5-badges-links

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:

See online demo and code

BS5-badges-position

Creating a circle badge example

You may also create a circle badge as well.

See online demo and code

BS5-badges-circle

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:

See online demo and code

BS5-badges-pills


 
This div height required for enabling the sticky sidebar