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.

Output:

👁 Image

Example 2: In this example, we will add headers and footers also, along with images in the list group

Output:

👁 Image

References: https://getbootstrap.com/docs/5.0/components/card/#list-groups