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">
            GeeksforGeeks
        </h1>
        <h2>Cards List groups</h2>
        <div class="card" style="width:18rem;">          
            <img src=
"https://media.geeksforgeeks.org/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">
            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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png" 
                            class="card-img-top" >
                    </li>
                    <li class="list-group-item">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png" 
                           class="card-img-top" >
                    </li>
                    <li class="list-group-item">
                        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png"
                           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

Bootstrap 5 Cards List groups

Explore