Bootstrap 5 Badges Positioned

Bootstrap5 Badges Positioned property is used to position the badge in the corner of the button or to make the link look more appealing. Below are the syntax and examples of Positioned Badges. We can use .top and .start classes to the vertical and horizontal positions of the element.

Badges Positioned Used Classes:

• badge: This global badge class shows the small count or notification dot.
• position-absolute: This class is used to position the badge element to the corner.
• translate-middle: This class performs the transformations translateX(-50%) and translateY(-50%) to the element. This allows you to absolute center an element when used with the edge positioning utilities such as start and top.

To position the element at the top-right, you need to set top-0 and start-100 along with the translate-middle attribute. You can change the numeric value to positioned as you want.

Syntax: 

<button type="button" class="btn position-relative"> 
 ...
 <span class="badge position-absolute top|start-*"> 
 ... 
 </span>
</button>

Example 1: This example shows the count in the badge. This can be used to show the count of unread notifications. The absolute position is given to the badge and the position of the badge is adjusted to the right corner of the button.

Output: 

👁 Bootstrap 5 Badges Positioned

Example 2: This is an example of the generic indicator, in which the button color is changed and a rounded border is applied.

Output: 

👁 Image

References: https://getbootstrap.com/docs/5.0/components/badge/#positioned