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 >
< link href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
</ head >
< body >
< div >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >Cards List groups</ h2 >
< div class = "card" style = "width:18rem;" >
< img src =
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 >
< link href =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
</ head >
< body >
< div >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< h2 >Cards List groups</ h2 >
< div class = "card" style = "width:18rem;" >
< div class = "card-header" >
< h4 >GeeksforGeeks</ h4 >
</ div >
< div class = "card-body" >
< ul class = "list-group list-group-flush" >
< li class = "list-group-item" >
< img src =
class = "card-img-top" >
</ li >
< li class = "list-group-item" >
< img src =
class = "card-img-top" >
</ li >
< li class = "list-group-item" >
< img src =
class = "card-img-top" >
</ li >
</ ul >
</ div >
< div class = "card-footer" >
< button class = "btn btn-success" >
GeeksforGeeks
</ button >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
References: https://getbootstrap.com/docs/5.0/components/card/#list-groups
Last Updated :
30 Nov, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...