Bootstrap 5 List group with badges

Last Updated : 07 Dec, 2022

Bootstrap 5 List group with badges can be used to add badges to the list group item to indicate the count of objects.

List group With badges Classes: No special classes are used in the List group With badges. You can customize the list using .badge classes and style them with flex.

Bootstrap 5 List group with badges classes:

list-group: This class is used to create a list group using the ul tag.
list-group-item: This class is used to create a list group item using the li tag.
badge: This class is sued to create a badge.

Syntax:

<ul class="list-group">
     <li class="list-group-item ...">
           ...
          <span class="badge ...">
                  ...
          </span>
     </li>
     ...
</ul>

Example 1: The following code demonstrates the Bootstrap 5 badges.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- Load Bootstrap -->
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
      
</head> 
  
<body class="m-2 "> 
    <div class="container"> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h2>List group With badges</h2> 
        <ul class="list-group col-5"> 
            <li class="list-group-item d-flex  
                justify-content-between  
                align-items-center bg-warning"> 
                Received Calls 
                <span class="badge bg-success  
                      rounded-pill"> 
                     4 
                </span> 
            </li> 
            <li class="list-group-item d-flex 
                justify-content-between  
                align-items-center bg-warning"> 
                Dialed Calls 
                <span class="badge bg-success  
                    rounded-pill"> 
                    2 
                </span> 
            </li> 
            <li class="list-group-item d-flex  
                justify-content-between  
                align-items-center bg-warning"> 
                Missed Calls 
                <span class="badge bg-success  
                        rounded-pill"> 
                    1 
                </span> 
            </li> 
        </ul>        
    </div> 
</body> 
</html>

Output:

Example 2: In this example, we will use these list group badges inside a card and add some styling to these badges by changing their background color.

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"> 
    
</head> 
  
<body class="m-2"> 
    <div> 
        <h1 class="text-success"> 
            GeeksforGeeks 
        </h1> 
        <h2>List group With badges</h2> 
        <div class="card" style="width:18rem;">           
            <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png" 
                class="card-img-top" id="GFG">            
            <div class="card-body">               
                <ul class="list-group"> 
                    <li class="list-group-item d-flex                          
                        justify-content-between  
                        align-items-center"> 
                        Stack 
                        <span class="badge bg-warning  
                                rounded-pill"> 
                                4 
                        </span> 
                    </li> 
                    <li class="list-group-item d-flex  
                        justify-content-between  
                        align-items-center"> 
                        Queue 
                        <span class="badge bg-primary  
                            rounded-pill"> 
                            2 
                        </span> 
                    </li> 
                    <li class="list-group-item d-flex  
                        justify-content-between  
                        align-items-center"> 
                        Linked List 
                        <span class="badge bg-danger  
                            rounded-pill"> 
                            1 
                        </span> 
                    </li> 
                </ul> 
            </div> 
        </div>         
    </div> 
</body> 
</html>