Bootstrap 5 Badges Positioned

Last Updated : 07 Dec, 2022

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous" /> 
    <title>GeeksForGeeks</title> 
</head> 
  
<body> 
    <center> 
        <h1 class="text-success"> 
            GeeksforGeeks</h1> 
        <h3 class="m-3"> 
            Bootstrap 5 Badges - Positioned 
        </h3> 
        <button type="button" 
                class="btn btn-success position-relative m-4"> 
            New Courses 
            <span class="badge position-absolute top-0  
                         start-100 translate-middle rounded-pill  
                         bg-danger"> 
                5 
                <span class="visually-hidden"> 
                    Notifications of newly launched courses 
                </span> 
            </span> 
        </button> 
    </center> 
</body> 
  
</html>

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous" /> 
    <title>GeeksForGeeks</title> 
</head> 
  
<body> 
    <center> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h3> 
            Bootstrap 5 Badges - Positioned 
        </h3> 
        <button type="button" 
                class="btn btn-primary position-relative m-3"> 
            New Courses 
            <span class="position-absolute top-0 start-100  
                         translate-middle p-2 rounded-pill  
                         bg-danger border border-light  
                         rounded-circle badge"> 
                <span class="visually-hidden"> 
                    Notifications of newly launched courses 
                </span> 
            </span> 
        </button> 
    </center> 
</body> 
  
</html>