Card images and overlays in Bootsrap - Browser Rendering Trace

Render Flow - Card images and overlays

[Read <div class='card'>] -> [Create card container] -> [Read <img class='card-img'>] -> [Add image inside card] -> [Read <div class='card-img-overlay'>] -> [Add overlay container on top of image] -> [Add text inside overlay]

The browser builds the card container, inserts the image, then layers the overlay div on top of the image to show text or content above the picture.

Render Steps - 3 Steps

Code Added:<div class="card" style="width: 18rem;"> ... </div>

Before

→

After

[ Card container ]
[               ]
[               ]
[               ]
[               ]

The card container appears as a box with fixed width but no content yet.

🔧 Browser Action:Creates card container box with specified width

Code Sample

A card with an image filling the card area and text overlayed on top of the image.

Bootsrap

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/286x180" class="card-img" alt="Sample Image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is an overlay text.</p>
  </div>
</div>

Render Quiz - 3 Questions

After applying step 2, what do you see inside the card container?

A Only text with no image

B A full image filling the card area

C An empty box with border

D An image with overlay text

Common Confusions - 2 Topics

Why does my overlay text sometimes appear behind the image?

The overlay must be inside a container with position relative or absolute so it layers on top. Bootstrap's card-img-overlay uses absolute positioning to appear above the image.

💡 Overlay text needs layering (z-index) and positioning to appear above images.

Why does the image stretch or not fill the card properly?

The card-img class makes the image fill the card width and height. If the image aspect ratio differs, it may stretch. Use images with matching aspect ratio or CSS object-fit to control.

💡 Use images sized to card or CSS object-fit to keep proportions.

Property Reference

Class	Purpose	Visual Effect	Common Use
card	Container for card content	Box with border and padding	Wraps card elements
card-img	Image inside card	Image fills card area fully	Display main card image
card-img-overlay	Overlay container on image	Text/content layered on top of image	Show text or buttons over image

Concept Snapshot

Bootstrap cards use .card as container. .card-img fills the card with an image. .card-img-overlay places text layered on the image. Overlay uses absolute positioning to appear above the image. Use matching image sizes to avoid stretching. Overlay text is visible only inside .card-img-overlay.