Bootstrap 5 Cards Images
Last Updated :
08 Dec, 2022
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.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<div>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Card Images</h2>
<div class="card" style="width:18rem;">
<img src=
class="card-img-top"
alt="img">
<div class="card-body">
<h5 class="card-title">
Angular JS
</h5>
<p class="card-text">
AngularJS is a Javascript
open-source front-end framework
that is mainly used to develop
single-page web applications(SPAs).
</p>
<p class="card-text">
<small class="text-muted">
GeeksforGeeks
</small>
</p>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will see how can we put images at the bottom.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<div>
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Card Images</h2>
<div class="card"
style="width:18rem;">
<div class="card-body">
<h5 class="card-title">
Angular JS
</h5>
<p class="card-text">
AngularJS is a Javascript open-source
front-end framework that is
mainly used to develop single-page
web applications(SPAs).
</p>
<p class="card-text">
<small class="text-muted">
GeeksforGeeks
</small>
</p>
</div>
<img src=
class="card-img-bottom">
</div>
</div>
</body>
</html>
|
Output:
Example 3: In this example, we will see an Image Overlay.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
</head>
<body>
<div class="container ">
<h1 class="text-success">
GeeksforGeeks
</h1>
<h2>Card Images</h2>
<div class="card"
style="width:18rem;">
<img src=
class="card-img-bottom"
height="200px"
width="100px">
<div class="card-body card-img-overlay text-white">
<h5 class="card-title">
Angular JS
</h5>
<p class="card-text">
AngularJS is a Javascript open-source
front-end framework that is
mainly used to develop single-page
web applications(SPAs).
</p>
<p class="card-text">
<small>
GeeksforGeeks
</small>
</p>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/card/#images-1
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...