Card images and overlays in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a card image in Bootstrap?

A card image is an image placed inside a Bootstrap card component, usually at the top or bottom, to visually represent the card content.

beginner

How do you add an overlay on a card image in Bootstrap?

You add an overlay by placing a card-img-overlay div inside the card with the image. This overlay can contain text or other content displayed over the image.

beginner

Which Bootstrap class makes the card image fill the card width automatically?

The class card-img-top or card-img-bottom makes the image fill the card's width at the top or bottom respectively.

intermediate

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

It allows you to place text or other content on top of the card image, creating a layered effect with the image as background.

intermediate

Can you use multiple elements inside a card-img-overlay? If yes, give an example.

Yes, you can add headings, paragraphs, buttons, or any HTML inside card-img-overlay. For example, a heading and a button can appear over the image.

Which class is used to place an image at the top of a Bootstrap card?

A card-img-bottom

B card-img-overlay

C card-img-top

D card-image

The card-img-top class places the image at the top of the card.

What does the card-img-overlay class do?

A Places content over the card image as an overlay

B Adds a border around the card image

C Resizes the card image

D Removes the card image

The card-img-overlay class places content like text or buttons over the card image.

Where should the card-img-overlay div be placed in the card structure?

A Outside the card

B Inside the card but outside the image

C Before the card element

D Inside the card and inside the image container

The card-img-overlay should be inside the card but outside the image.

Which of these is NOT a valid Bootstrap card image class?

A card-img-center

B card-img-bottom

C card-img-top

D card-img-overlay

card-img-center is not a valid Bootstrap class.

What kind of content can you put inside a card-img-overlay?

A Only links

B Only text

C Only images

D Any HTML content like text, buttons, or headings

You can put any HTML content inside card-img-overlay, such as text, buttons, or headings.

Explain how to create a Bootstrap card with an image and text overlay on top of the image.

Think about layering content on top of an image inside a card.

Describe the difference between card-img-top and card-img-overlay in Bootstrap cards.

One is for image placement, the other is for layering content.