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= 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= 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= 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
Please Login to comment...