Bootstrap 5 Cards Images

Bootstrap 5 Cards Images facilitates adding the image to the card, which may contain the content. The image can be appended to either of the ends of the card or can be overlayed the image with the card content, or can be simply embedded into the card. Images enhance the appearance of the card and make it more attractive and expressive. An image can be embedded in the following ways with the card content.

• Image caps: The Card can add the image caption either to the top or the bottom, which is similar to the headers and footers & accordingly, an image can be aligned at the top or bottom of a card.
• Image overlays: This is used to overlay the card’s text & turn an image into a card background, which may or may not require additional styles or utilities, depending on the image used.

Cards Images Classes:

• card-img-top: This class is used for adding an image as an image cap of the card.
• card-img-bottom: This class is used for adding an image to the bottom of the card.
• card-img-overlay: To set an image at the background.

Syntax:

<div class="card" >
 <img src="..." 
 class="card-img-top" 
 alt="...">
 <div class="card-body">
 ...
 </div>
</div>

//For Image Overlay
<div class="card">
 <img src="..." 
 class="card-img" 
 alt="...">
 <div class="card-img-overlay">
 ...
 </div>
</div>

Example 1: In this example, we will see the image at the top.

Output:

👁 Image

Example 2: In this example, we will see how can we put images at the bottom.

Output:

👁 Image

Example 3: In this example, we will see an Image Overlay.

Output:

👁 Image

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