VOOZH about

URL: https://www.geeksforgeeks.org/bootstrap/bootstrap-5-list-group-with-badges/

⇱ Bootstrap 5 List group with badges - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Bootstrap 5 List group with badges

Last Updated : 23 Jul, 2025

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

Comment

Explore