0
0
Bootsrapmarkup~5 mins

Card images and overlays in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Card images and overlays help you show pictures with text or buttons on top. This makes your content look nice and easy to understand.

You want to show a photo with a title or description on top.
You need a button or link over an image for quick actions.
You want to highlight important info on a picture.
You want a stylish card with text that stands out on an image.
Syntax
Bootsrap
<div class="card bg-dark text-white">
  <img src="image.jpg" class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some overlay text.</p>
  </div>
</div>

The card-img class makes the image fill the card.

The card-img-overlay class places text on top of the image.

Examples
This example shows a card with a dark background and white text overlay on the image.
Bootsrap
<div class="card bg-dark text-white">
  <img src="https://via.placeholder.com/300x200" class="card-img" alt="Sample Image">
  <div class="card-img-overlay">
    <h5 class="card-title">Overlay Title</h5>
    <p class="card-text">Overlay text on image.</p>
  </div>
</div>
This example shows a card with an image on top and text below it, not overlaid.
Bootsrap
<div class="card">
  <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Sample Image">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">Text below the image, not overlay.</p>
  </div>
</div>
This example uses flexbox utilities to place overlay text at the bottom of the image.
Bootsrap
<div class="card bg-primary text-white">
  <img src="https://via.placeholder.com/300x200" class="card-img" alt="Sample Image">
  <div class="card-img-overlay d-flex flex-column justify-content-end">
    <h5 class="card-title">Bottom Overlay</h5>
    <p class="card-text">Text aligned at the bottom of the image.</p>
  </div>
</div>
Sample Program

This complete example shows a card with a dark overlay on an image. The text and a button appear on top of the image, centered vertically. The button has an accessible label.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Card Image Overlay Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="container py-4">
    <h2 class="mb-4">Card with Image and Overlay</h2>
    <div class="card bg-dark text-white" style="max-width: 300px;">
      <img src="https://via.placeholder.com/300x200" class="card-img" alt="Sample Image">
      <div class="card-img-overlay d-flex flex-column justify-content-center">
        <h5 class="card-title">Beautiful View</h5>
        <p class="card-text">This is an example of text over an image.</p>
        <a href="#" class="btn btn-light btn-sm mt-2" aria-label="Learn more about Beautiful View">Learn More</a>
      </div>
    </div>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
OutputSuccess
Important Notes

Use alt text on images for accessibility.

Overlay text color should contrast well with the image for readability.

Use Bootstrap utility classes like d-flex and justify-content-center to position overlay content easily.

Summary

Card images with overlays let you place text or buttons on top of pictures.

Use card-img for the image and card-img-overlay for the overlay content.

Make sure overlay text is readable and accessible.