Open In App

Bootstrap 5 Cards List groups

Improve
Improve
Like Article
Like
Save
Share
Report

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=
        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>
    <!-- Load Bootstrap -->
    <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
Previous
Next
Share your thoughts in the comments
Similar Reads