Card images and overlays in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

Identify the overlay text color in this Bootstrap card

Given this Bootstrap card with an image overlay, what color will the overlay text appear as in the browser?

Bootsrap

<div class="card bg-dark text-white">
  <img src="https://via.placeholder.com/300x180" class="card-img" alt="Sample Image">
  <div class="card-img-overlay">
    <h5 class="card-title">Overlay Title</h5>
    <p class="card-text">Overlay text content.</p>
  </div>
</div>

A Black

B Gray

C White

D Blue

💡 Hint

Look at the text color classes applied to the card container.

The card has the class 'text-white' which sets the text color inside the card to white, including the overlay text.

❓ selector

intermediate

Which CSS selector targets the overlay text inside a Bootstrap card?

You want to style the overlay text inside a Bootstrap card image overlay. Which CSS selector correctly targets the overlay text elements?

A .card .card-img .card-title

B .card-title .card-img-overlay

C .card-img .card-img-overlay .card-text

D .card-img-overlay .card-title, .card-img-overlay .card-text

💡 Hint

The overlay text is inside the element with class 'card-img-overlay'.

The overlay text elements like titles and paragraphs are inside the '.card-img-overlay' container, so selecting '.card-img-overlay .card-title' and '.card-img-overlay .card-text' targets them correctly.

🧠 Conceptual

advanced

Why use 'position-relative' on the card container with image overlays?

In Bootstrap, when adding an image overlay inside a card, why is it important to have the card container use the class 'position-relative'?

A It makes the card background transparent for the overlay to show.

B It sets the card as a reference point so the overlay can be positioned absolutely inside it.

C It changes the card's display to flex for better layout.

D It automatically adds padding around the overlay text.

💡 Hint

Think about how absolute positioning works in CSS.

Absolute positioning places elements relative to the nearest positioned ancestor. 'position-relative' on the card container ensures the overlay is positioned inside the card boundaries.

❓ layout

advanced

How to make a Bootstrap card image overlay text vertically centered?

You want the overlay text inside a Bootstrap card image overlay to be vertically centered over the image. Which approach achieves this best?

Bootsrap

<div class="card bg-dark text-white position-relative">
  <img src="https://via.placeholder.com/300x180" class="card-img" alt="Sample Image">
  <div class="card-img-overlay d-flex justify-content-center align-items-center">
    <h5 class="card-title">Centered Title</h5>
  </div>
</div>

A Add 'd-flex justify-content-center align-items-center' to '.card-img-overlay' to center content vertically and horizontally.

B Add 'text-center' to '.card-img-overlay' only.

C Add 'mt-auto mb-auto' classes to the overlay text element.

D Wrap the overlay text in a <center> tag.

💡 Hint

Flexbox utilities in Bootstrap help with centering.

'd-flex' makes the overlay a flex container. 'justify-content-center' centers horizontally, and 'align-items-center' centers vertically.

❓ accessibility

expert

Best practice for accessible image overlays in Bootstrap cards

For a Bootstrap card with an image and text overlay, which practice improves accessibility the most for screen reader users?

Bootsrap

<div class="card bg-dark text-white position-relative">
  <img src="https://via.placeholder.com/300x180" class="card-img" alt="Sunset over mountains">
  <div class="card-img-overlay">
    <h5 class="card-title">Mountain Sunset</h5>
    <p class="card-text">A beautiful view of the sun setting behind the peaks.</p>
  </div>
</div>

A Provide a meaningful alt attribute on the image describing the scene.

B Use aria-hidden="true" on the overlay text to avoid redundancy.

C Remove the alt attribute from the image to avoid confusion.

D Add role="presentation" to the image to make it decorative.

💡 Hint

Think about how screen readers read images and text overlays.

A meaningful alt attribute describes the image content for screen readers. The overlay text complements the image but does not replace the alt text.