Bootstrap 5 List group with badges

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>

Output:

References: https://getbootstrap.com/docs/5.0/components/list-group/#with-badges

Bootstrap 5 List group with badges

Explore