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.

Practice

1. What does the Bootstrap class img-fluid do to an image?

easy

A. Changes the image to grayscale

B. Adds a border around the image

C. Makes the image scale automatically to fit its container

D. Rotates the image 90 degrees

Solution

1. Step 1: Understand the purpose of img-fluid

   The img-fluid class in Bootstrap applies CSS styles that make the image responsive by setting its max-width to 100% and height to auto. This means the image will scale to fit the width of its container without distortion.

2. Final Answer:

   Makes the image scale automatically to fit its container -> Option C

3. Quick Check:

   Responsive images = img-fluid scales image [OK]

Hint: Remember img-fluid means image fits container width [OK]

Common Mistakes:

• Thinking img-fluid adds borders or effects
• Confusing img-fluid with image rotation or filters
• Assuming img-fluid fixes image height only

2. Which of the following is the correct way to make an image responsive in Bootstrap?

easy

A. <img src='photo.jpg' class='responsive' alt='Photo'>

B. <img src='photo.jpg' class='img-fluid' alt='Photo'>

C. <img src='photo.jpg' class='img-responsive' alt='Photo'>

D. <img src='photo.jpg' class='fluid-img' alt='Photo'>

Solution

1. Step 1: Recall Bootstrap's responsive image class

   Bootstrap 4 and later uses img-fluid to make images responsive, not img-responsive or other variants. <img src='photo.jpg' class='img-fluid' alt='Photo'> uses the correct class with proper HTML syntax and includes alt text for accessibility.

2. Final Answer:

   <img src='photo.jpg' class='img-fluid' alt='Photo'> -> Option B

3. Quick Check:

   Bootstrap responsive image class = img-fluid [OK]

Hint: Use img-fluid class exactly for responsive images [OK]

Common Mistakes:

• Using outdated class img-responsive
• Misspelling the class name
• Omitting alt attribute

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

<div style='width: 200px;'>
  <img src='image.jpg' class='img-fluid' alt='Sample Image'>
</div>

medium

A. The image will overflow outside the 200px container

B. The image will be hidden because of container size

C. The image will be fixed size ignoring container width

D. The image will be exactly 200px wide, scaling height proportionally

Solution

1. Step 1: Analyze container and img-fluid effect

   The container div has a fixed width of 200px, so the image inside cannot be wider than this. The img-fluid class sets max-width to 100%, so the image scales down to fit the container width (200px) and height adjusts automatically to keep aspect ratio.

2. Final Answer:

   The image will be exactly 200px wide, scaling height proportionally -> Option D

3. Quick Check:

   img-fluid scales image to container width [OK]

Hint: img-fluid limits image width to container max-width [OK]

Common Mistakes:

• Thinking image ignores container width
• Assuming image overflows container
• Confusing fixed size with responsive scaling

4. Identify the error in this Bootstrap image code:

<img src='pic.jpg' class='img-fluid'>

medium

A. Missing alt attribute for accessibility

B. Wrong class name, should be img-responsive

C. Image source file extension is incorrect

D. img-fluid class cannot be used on img tags

Solution

1. Step 1: Validate class and attributes

   The class img-fluid is correctly used on the <img> tag to make the image responsive. However, the alt attribute is missing, which is important for accessibility and SEO.

2. Final Answer:

   Missing alt attribute for accessibility -> Option A

3. Quick Check:

   Always include alt text on images [OK]

Hint: Always add alt text to images for accessibility [OK]

Common Mistakes:

• Ignoring alt attribute importance
• Using outdated class img-responsive
• Thinking img-fluid is invalid on img

5. You want an image to be responsive but never exceed 300px width even on large screens. Which Bootstrap and CSS combination achieves this?

hard

A. <img src='img.jpg' class='img-fluid' style='max-width: 300px;' alt='Image'>

B. <img src='img.jpg' class='img-fluid' style='width: 300px;' alt='Image'>

C. <img src='img.jpg' class='img-responsive' style='max-width: 300px;' alt='Image'>

D. <img src='img.jpg' style='max-width: 300px;' alt='Image'>

Solution

1. Step 1: Combine responsive class and CSS limit

   The img-fluid class makes the image scale with its container responsively. Adding style='max-width: 300px;' ensures it never grows wider than 300px even on large screens. Other options use fixed width (loses responsiveness below 300px), outdated class, or lack responsive class.

2. Final Answer:

   <img src='img.jpg' class='img-fluid' style='max-width: 300px;' alt='Image'> -> Option A

3. Quick Check:

   img-fluid + max-width limits size responsively [OK]

Hint: Combine img-fluid with max-width CSS to limit size [OK]

Common Mistakes:

• Using fixed width instead of max-width
• Using outdated img-responsive class
• Omitting img-fluid for responsiveness