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.
<!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.
<!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