Bootstrap 5 Cards Image Caps
Last Updated :
17 Jan, 2023
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.
HTML
<!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 =
</ 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 =
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"
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.
HTML
<!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 =
</ 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"
Go to Practice
</ a >
</ div >
< img src =
class = "card-img-bottom" />
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.2/components/card/#image-caps
Share your thoughts in the comments
Please Login to comment...