Responsive images in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does the img-fluid class do in Bootstrap?

In Bootstrap, what is the main effect of adding the img-fluid class to an <img> element?

A It crops the image to a square shape regardless of original dimensions.

B It adds a fixed width and height to the image, ignoring the container size.

C It makes the image scale nicely to the parent container's width, keeping its aspect ratio.

D It disables image loading on small screens to save bandwidth.

💡 Hint

Think about how images behave when the screen size changes.

The img-fluid class applies max-width: 100% and height: auto styles, so the image resizes to fit its container while keeping its original shape.

📝 Syntax

intermediate

Which Bootstrap class makes an image rounded and responsive?

You want an image that is both responsive and has rounded corners using Bootstrap classes. Which option correctly applies both?

A <img src="photo.jpg" class="img-fluid rounded" alt="Photo">

B <img src="photo.jpg" class="rounded img-responsive" alt="Photo">

C <img src="photo.jpg" class="img-rounded img-fluid" alt="Photo">

D <img src="photo.jpg" class="responsive rounded-circle" alt="Photo">

💡 Hint

Check Bootstrap 5 class names for responsiveness and rounding.

In Bootstrap 5, img-fluid makes images responsive and rounded adds rounded corners. Other classes like img-responsive or img-rounded are from older versions or invalid.

❓ rendering

advanced

What will be the visual result of this Bootstrap image code on a small screen?

Consider this HTML snippet:

<img src="landscape.jpg" class="img-fluid rounded-circle" alt="Landscape">

What will the image look like on a small mobile screen?

Bootsrap

<img src="landscape.jpg" class="img-fluid rounded-circle" alt="Landscape">

A A circular image that scales down to fit the screen width, keeping its shape.

B A square image with sharp corners that does not resize on small screens.

C An image that is cropped to a circle but stays at original size, causing overflow.

D A blurred image with a circular border that fills the entire screen.

💡 Hint

Think about what img-fluid and rounded-circle do together.

img-fluid makes the image scale responsively to the container width, and rounded-circle makes the image appear circular by rounding corners fully. So on small screens, the image shrinks but stays circular.

❓ selector

advanced

Which CSS selector targets only responsive images with rounded corners in Bootstrap?

You want to write custom CSS that styles only images that have both img-fluid and rounded classes in Bootstrap. Which selector is correct?

A img .img-fluid.rounded

B .img-fluid .rounded img

C .img-fluid, .rounded img

D img.img-fluid.rounded

💡 Hint

Remember how to select elements with multiple classes.

The selector img.img-fluid.rounded selects <img> elements that have both classes img-fluid and rounded. Other options select descendants or separate classes incorrectly.

❓ accessibility

expert

What is the best practice for accessible responsive images in Bootstrap?

You have a responsive image using Bootstrap's img-fluid class. Which practice improves accessibility the most?

Bootsrap

<img src="logo.png" class="img-fluid" alt="Company logo">

A Use empty <code>alt=""</code> to hide decorative images from screen readers.

B Always include a meaningful <code>alt</code> attribute describing the image content.

C Add <code>aria-hidden="true"</code> to all images to prevent screen reader distraction.

D Use <code>title</code> attribute instead of <code>alt</code> for better screen reader support.

💡 Hint

Think about how screen readers understand images.

The alt attribute provides text alternatives for images. Meaningful alt text helps users who rely on screen readers understand the image content. Empty alt is only for purely decorative images.