How to create card with overlay bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create Card with Overlay in Bootstrap Easily

To create a card with an overlay in Bootstrap, use a card container with an image and place a card-img-overlay div inside it. This overlay div holds text or other content that appears on top of the image, styled with Bootstrap's built-in classes.

📐

Syntax

The basic structure uses a div with class card containing an img with class card-img. Inside the card, add a div with class card-img-overlay to hold overlay content like text or buttons.

card: The main container for the card.
card-img: The image that fills the card background.
card-img-overlay: The overlay area placed on top of the image.

html

<div class="card">
  <img src="image.jpg" class="card-img" alt="...">
  <div class="card-img-overlay">
    <!-- Overlay content here -->
  </div>
</div>

💻

Example

This example shows a Bootstrap card with a background image and a dark transparent overlay containing a title and text. The overlay uses Bootstrap utility classes for text color and background transparency.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Card with Overlay</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="card text-white">
      <img src="https://via.placeholder.com/600x300" class="card-img" alt="Sample Image">
      <div class="card-img-overlay d-flex flex-column justify-content-end bg-dark bg-opacity-50">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">This is an overlay text on the card image.</p>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A card with a wide image background and a dark transparent overlay at the bottom showing white title and text.

⚠️

Common Pitfalls

Common mistakes include:

Not using card-img class on the image, so the overlay won't position correctly.
Placing overlay content outside the card-img-overlay div, causing it not to appear over the image.
Forgetting to set text color or background transparency, making overlay text hard to read.

html

<!-- Wrong: Missing card-img class -->
<div class="card">
  <img src="image.jpg" alt="...">
  <div class="card-img-overlay">
    <h5>Title</h5>
  </div>
</div>

<!-- Right: Correct classes and structure -->
<div class="card">
  <img src="image.jpg" class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5>Title</h5>
  </div>
</div>

📊

Quick Reference

card: Wraps the entire card.
card-img: Image that fills the card background.
card-img-overlay: Container for overlay content positioned over the image.
Use Bootstrap utility classes like bg-dark bg-opacity-50 for transparent backgrounds.
Set text color with classes like text-white for readability.

✅

Key Takeaways

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

Apply background transparency and text color classes to make overlay text readable.

Keep overlay content inside the card-img-overlay div to position it correctly.

Bootstrap utility classes help style overlays quickly without custom CSS.