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.

Practice

1. What is the purpose of the card-img-overlay class in Bootstrap cards?

easy

A. To add a border around the card image

B. To place text or content on top of the card image

C. To resize the card image automatically

D. To add a shadow effect to the card image

Solution

1. Step 1: Understand the role of card-img-overlay

   This class is used to add content that appears over the card image, such as text or buttons.

2. Step 2: Compare with other options

   Other options describe effects or styles not related to overlays, so they are incorrect.

3. Final Answer:

   To place text or content on top of the card image -> Option B

4. Quick Check:

   Overlay content = card-img-overlay = B [OK]

Hint: Overlay means content on top of image [OK]

Common Mistakes:

• Confusing overlay with image resizing
• Thinking overlay adds borders or shadows
• Ignoring that overlay is for layering content

2. Which of the following is the correct way to add an image inside a Bootstrap card with an overlay?

easy

A. Text

B. Text

C. Text

D. Text

Solution

1. Step 1: Check correct structure for image and overlay

   The image uses card-img class and the overlay content uses card-img-overlay inside the card container.

2. Step 2: Validate

   Text

   structure

   Text
   correctly places the image first with card-img and overlay div after with card-img-overlay.

3. Final Answer:

   <div class='card'><img src='img.jpg' class='card-img'><div class='card-img-overlay'>Text</div></div> -> Option D

4. Quick Check:

   Image class = card-img, Overlay class = card-img-overlay [OK]

Hint: Image gets card-img, overlay gets card-img-overlay [OK]

Common Mistakes:

• Putting overlay class on the image tag
• Placing overlay outside the card container
• Mixing up class names between image and overlay

3. What will be the visual result of this code?

<div class='card' style='width: 18rem;'>
  <img src='photo.jpg' class='card-img' alt='Sample Image'>
  <div class='card-img-overlay'>
    <h5 class='card-title'>Hello</h5>
    <p class='card-text'>Overlay text</p>
  </div>
</div>

medium

A. A card with the image and text displayed on top of the image

B. A card with the image below and text below the image

C. Only the text is visible, image is hidden

D. The image is stretched and text is outside the card

Solution

1. Step 1: Understand card-img and card-img-overlay behavior

   The image fills the card area and the overlay places text on top of the image.

2. Step 2: Visualize the overlay content

   The card-img-overlay content appears layered on the image, so text is visible over the picture.

3. Final Answer:

   A card with the image and text displayed on top of the image -> Option A

4. Quick Check:

   Overlay text on image = card-img-overlay = C [OK]

Hint: Overlay means text appears on top of image [OK]

Common Mistakes:

• Thinking overlay text appears below image
• Assuming image is hidden by overlay
• Confusing overlay with separate card sections

4. Identify the error in this Bootstrap card code:

<div class='card'>
  <div class='card-img-overlay'>Overlay Text</div>
  <img src='pic.jpg' class='card-img' alt='Pic'>
</div>

medium

A. The card-img-overlay class should be on the image tag

B. The image tag should not have the class 'card-img'

C. The overlay div should come after the image tag inside the card

D. The card div is missing a width style

Solution

1. Step 1: Check the order of image and overlay

   The overlay content must come after the image tag to appear on top visually.

2. Step 2: Verify class usage

   The image should have card-img and overlay a separate div with card-img-overlay. The order matters for layering.

3. Final Answer:

   The overlay div should come after the image tag inside the card -> Option C

4. Quick Check:

   Overlay after image = layering correct = A [OK]

Hint: Overlay must be after image tag for layering [OK]

Common Mistakes:

• Placing overlay before image causing hidden text
• Misusing classes on wrong elements
• Ignoring layering order in HTML structure

5. You want to create a Bootstrap card with a dark semi-transparent overlay on the image and white text on top. Which approach is best?

hard

A. Use card-img for the image, card-img-overlay with a custom CSS class adding a dark background with opacity, and white text classes

B. Add a dark filter directly on the image tag and place text below the image

C. Use only card-img-overlay with a dark background but no image tag

D. Place the image inside card-img-overlay and add white text inside the image tag

Solution

1. Step 1: Understand layering with card-img and card-img-overlay

   The image uses card-img and overlay content uses card-img-overlay for layering text on image.

2. Step 2: Add dark semi-transparent background and white text

   Custom CSS on card-img-overlay can add a dark background with opacity. White text classes ensure readability.

3. Final Answer:

   Use card-img for image, card-img-overlay with custom dark background and white text -> Option A

4. Quick Check:

   Overlay + custom dark bg + white text = D [OK]

Hint: Overlay div with semi-transparent bg and white text works best [OK]

Common Mistakes:

• Trying to filter image without overlay div
• Placing image inside overlay div incorrectly
• Not adding text color for contrast