Bootstrap 5 Cards List groups
Bootstrap 5 Cards List groups are used to create a group of lists inside the card to show information like features, pricing, and many more.
Cards List groups used Classes: No special classes are used in List groups. You can customize the component using List groups classes.
Syntax:
<div class="card" > <ul class="list-group list-group-flush"> <li class="list-group-item">...</li> ... </ul> </div>
Below examples illustrate the Bootstrap 5 Cards List groups
Example 1: In this example, we will learn about card list groups.
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 > < div > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Cards List groups</ h2 > < div class = "card" style = "width:18rem;" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/Java.png" class = "card-img-top" id = "GFG" > < div class = "card-body" > < ul class = "list-group list-group-flush" > < li class = "list-group-item" > Stack</ li > < li class = "list-group-item" > Queue</ li > < li class = "list-group-item" > Linked List</ li > </ ul > </ div > </ div > </ div > </ body > </ html > |
Output:
Example 2: In this example, we will add headers and footers also, along with images in the list group
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 > < div > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Cards List groups</ h2 > < div class = "card" style = "width:18rem;" > < div class = "card-header" > < h4 >w3wiki</ h4 > </ div > < div class = "card-body" > < ul class = "list-group list-group-flush" > < li class = "list-group-item" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/Java.png" class = "card-img-top" > </ li > < li class = "list-group-item" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png" class = "card-img-top" > </ li > < li class = "list-group-item" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png" class = "card-img-top" > </ li > </ ul > </ div > < div class = "card-footer" > < button class = "btn btn-success" > w3wiki </ button > </ div > </ div > </ div > </ body > </ html > |
Output:
References: https://getbootstrap.com/docs/5.0/components/card/#list-groups
Contact Us