Bootstrap 5 Cards Horizontal

Bootstrap 5 Cards Horizontal is used to make the card horizontal so the image and content can be placed side by side. By default, the image, and the text content are stacked vertically and we have to change some settings to set them beside one another. To make it horizontal we have to use a grid class and have image and text content in columns in a row and reduce the grid gutters to zero. 

Prerequisite:Bootstrap 5 Card layouts, and Layout Gutters.

Bootstrap 5 Cards Horizontal classes:

• col-md-*: This class is used to make the card horizontal at the md breakpoint.
• g-0: This class is used to define the grid gutters as 0, so that there are no gap between the columns.

Note: * can take values from 0,1, 2, 3 and so on.

Syntax:

<div class="card">
 <div class="row g-0">
 <div class="col">
 <img src="..." alt="...">
 </div>
 <div class="col-md-*">
 <div class="card-body">
 ....
 </div>
 </div>
 </div>
</div>

Example 1: This example below demonstrates the Horizontal Cards in action and a couple of them beside each other.

Output:

Example 2: The code below demonstrates how we can add a card in a modal.

Output:

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