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.

Output:

👁 Image

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.

Output:

👁 Image

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