Card images and overlays in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add an image to the card.

Bootsrap

<div class="card">
  <img src="image.jpg" class="card-img-[1]" alt="Sample Image">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Aoverlay

Bbottom

Ctop

Dbackground

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'background' or 'overlay' classes which are not valid for card images.

Placing the image at the bottom when the question asks for a standard image placement.

The class card-img-top places the image at the top of the card, which is the standard way to add an image in a Bootstrap card.

2fill in blank

medium

Complete the code to add a dark overlay on the card image.

Bootsrap

<div class="card bg-dark text-white">
  <img src="image.jpg" class="card-img" alt="Sample Image">
  <div class="card-img-[1]">
    <h5 class="card-title">Card title</h5>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Atop

Bbottom

Cbackground

Doverlay

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'top' or 'bottom' which position images, not overlays.

Using 'background' which is not a Bootstrap card class.

The class card-img-overlay creates a layer over the image where you can place text or other content.

3fill in blank

hard

Fix the error in the code to properly overlay text on the card image.

Bootsrap

<div class="card text-white">
  <img src="image.jpg" class="card-img" alt="Sample Image">
  <div class="card-img-[1]">
    <h5 class="card-title">Overlay Title</h5>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Aoverlay

Btop

Cbottom

Dbackground

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'top' or 'bottom' which are for image placement, not overlays.

Omitting the overlay class causing text to appear below the image.

The overlay container must use card-img-overlay to properly place content over the image.

4fill in blank

hard

Fill both blanks to create a card with an image overlay and white text.

Bootsrap

<div class="card [1]">
  <img src="image.jpg" class="card-img" alt="Sample Image">
  <div class="card-img-[2]">
    <h5 class="card-title">Overlay Text</h5>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Abg-dark text-white

Boverlay

Cbg-primary text-white

Dbg-white text-dark

Attempts:

3 left

💡 Hint

Common Mistakes

Using light background classes which make white text hard to read.

Forgetting the overlay class causing text to not appear over the image.

The card needs bg-dark text-white classes for a dark background with white text, and card-img-overlay to place the overlay content on the image.

5fill in blank

hard

Fill all three blanks to create a card with an image overlay, white text, and a button inside the overlay.

Bootsrap

<div class="card [1]">
  <img src="image.jpg" class="card-img" alt="Sample Image">
  <div class="card-img-[2]">
    <h5 class="card-title">Overlay Title</h5>
    <p class="card-text">Some overlay text.</p>
    <a href="#" class="btn btn-[3]">Click Me</a>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Abg-dark text-white

Boverlay

Cprimary

Dbg-light text-dark

Attempts:

3 left

💡 Hint

Common Mistakes

Using light background classes making text hard to read.

Forgetting the overlay class so text and button are not over the image.

Using wrong button color classes.

The card uses bg-dark text-white for dark background and white text, card-img-overlay for the overlay container, and btn-primary for a blue button.