Bootstrap 5 Cards Layout

Bootstrap 5 Cards layout facilitates a variety of classes to be used for styling the content within the cards component, although, there are no responsive layout options available yet in Bootstrap. There are 3 components that help to define the Card layout, which are described below:

• Card groups: This component will help to render the cards as a single element with equal width and height columns. They use display: flex. While we use footer content in the card layout, will automatically line up.
• Grid cards: A Bootstrap grid system is used to display how many cards are visible on the viewport. The .row-cols-1  is used to display cards in one row and .row-cols-md-2 split four cards across multiple rows, from the medium breakpoint up.
• Masonry: In v4 of bootstrap we tried to mimic masonry but it had a lot of side effects so masonry is not included in bootstrap. If we want to use a masonry layout, we can use a masonry plugin which is not included in bootstrap.

Syntax:

<div class="card-group">
 <div class="card">
 <img src="..." 
 class="card-img-top" 
 alt="...">
 <div class="card-body">
 <h5 class="card-title">
 ...
 </h5>
 <p class="card-text">
 ...
 </p>
</div>
 <div class="card-footer">
 <small class="text-muted">
 ...
 </small>
 </div>
</div>

Example 1: This example describes the basic usage of the Bootstrap 5 Cards layout by specifying the different Card groups.

Output:

Example 2: In this example, the .row-cols-2 class lays out the cards on two-column, and the .row-cols-md-2 class splits 4 cards to equal width across multiple rows is shown.

Output:

Reference: https://getbootstrap.com/docs/5.0/components/card/#card-layout