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="https://www.geeksforgeeks.org/..." class="card-img-top" />
<div class="card-body">...</div>
<img src="https://www.geeksforgeeks.org/..." 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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 - GeeksforGeeks</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="my-4 text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>
Bootstrap 5 Card Image Caps
</strong>
</div>
<div class="row">
<div class="col-6 offset-3">
<div class="card">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221227015624/download.png"
class="card-img-top">
<div class="card-body">
<h5 class="card-title">
GeeksforGeeks Problem of the Day
</h5>
<p class="card-text">
Problem of the Day is a great way to develop the
habit of coding. Head over to the practice portal
and solve problem daily to level up your
skills and earn goodies.</p>
<a class="card-text"
href="https://practice.geeksforgeeks.org">
Go to Practice
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: In this example, we used the card-img-bottom class to use the image as the bottom cap of the card.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 - GeeksforGeeks</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="my-4 text-center">
<h1 class="text-success">
GeeksforGeeks
</h1>
<strong>
Bootstrap 5 Card Image Caps
</strong>
</div>
<div class="row">
<div class="col-6 offset-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">
GeeksforGeeks Problem of the Day
</h5>
<p class="card-text">
Problem of the Day is a great way to develop the
habit of coding. Head over to the practice portal
and solve problem daily to level up your
skills and earn goodies.</p>
<a class="card-text"
href="https://practice.geeksforgeeks.org">
Go to Practice
</a>
</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221227015624/download.png"
class="card-img-bottom" />
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.2/components/card/#image-caps