Bootstrap 5 Cards Image Caps

In Bootstrap 5, Images can be used similarly to headers and footers of the cards. These images are called Card Image Caps. A card can contain a top image or bottom image or both at the same time. 

Bootstrap 5 Cards Image Caps Classes:

• card-img-top: This class is used on the card image to use it as a top cap.
• card-img-bottom: This class is used on the card image to use it as a bottom cap.

Syntax:

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

Example 1: In this example, we used the card-img-top class of the card to provide an image as the top cap.

Output:

👁 Image

Example 2: In this example, we used the card-img-bottom class to use the image as the bottom cap of the card.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.2/components/card/#image-caps