Responsive images in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does it mean for an image to be responsive in web design?

A responsive image automatically adjusts its size to fit the screen or container it is in, so it looks good on all devices like phones, tablets, and desktops.

beginner

Which Bootstrap class makes an image responsive?

The <code>.img-fluid</code> class in Bootstrap makes an image scale nicely to the parent container by setting <code>max-width: 100%</code> and <code>height: auto</code>.

beginner

Why should you use alt attributes with images?

The alt attribute provides alternative text for images. It helps screen readers describe the image to visually impaired users and improves accessibility.

intermediate

How does the srcset attribute help with responsive images?

The srcset attribute lets the browser choose the best image size to load based on the device's screen size and resolution, saving bandwidth and improving load speed.

intermediate

What CSS properties does Bootstrap's <code>.img-fluid</code> class use to make images responsive?

It uses max-width: 100% to limit the image width to its container and height: auto to keep the image's aspect ratio.

Which Bootstrap class should you add to an <img> tag to make it responsive?

A .img-scale

B .img-responsive

C .responsive-img

D .img-fluid

Bootstrap uses the class .img-fluid to make images scale responsively.

What does the CSS property max-width: 100% do for an image?

A Prevents the image from becoming wider than its container

B Makes the image always 100 pixels wide

C Sets the image width to 100% of the screen

D Fixes the image size regardless of container

max-width: 100% limits the image width to the container's width, preventing overflow.

Why is it important to include the alt attribute on images?

A It changes the image size

B It improves accessibility for screen readers

C It adds a border around the image

D It makes the image responsive

The alt attribute provides text for screen readers, helping users who cannot see the image.

What does the srcset attribute do in an <img> tag?

A Specifies multiple image sources for different screen sizes

B Sets the image border style

C Defines the image caption

D Adds a hover effect to the image

srcset allows the browser to pick the best image size based on device resolution and screen size.

If an image has height: auto in CSS, what happens?

A The image height is fixed and does not change

B The image height becomes zero

C The image height adjusts to keep its original proportions

D The image height doubles

height: auto keeps the image's aspect ratio when the width changes.

Explain how to make an image responsive using Bootstrap classes and why it is important.

Think about how images behave on phones versus desktops.

Describe the role of the alt attribute and the srcset attribute in responsive images.

One helps people, the other helps devices.

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