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.

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 - w3wiki</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">
                w3wiki
            </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.w3wiki.net/wp-content/uploads/20221227015624/download.png"
                        class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">
                            w3wiki 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.w3wiki.net">
                            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 - w3wiki</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">
                w3wiki
            </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">
                            w3wiki 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.w3wiki.net">
                           Go to Practice
                        </a>
                    </div>
                    <img src=
"https://media.w3wiki.net/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

HTML

HTML

Contact Us