Responsive images in Bootsrap - Mini Project: Build & Apply

Responsive Images with Bootstrap

📖 Scenario: You are creating a simple webpage for a photography portfolio. You want the images to look good on all devices, from phones to large desktop screens.

🎯 Goal: Build a webpage that uses Bootstrap to display a responsive image that scales nicely on different screen sizes.

📋 What You'll Learn

Use Bootstrap 5 CSS from CDN

Create a basic HTML5 page structure with lang, charset, and viewport meta tags

Add an image with the Bootstrap class img-fluid to make it responsive

Use semantic HTML elements

Ensure the image has an alt attribute for accessibility

💡 Why This Matters

🌍 Real World

Responsive images are essential for websites to look good on phones, tablets, and desktops without loading huge images unnecessarily.

💼 Career

Web developers often use Bootstrap or similar frameworks to quickly create responsive layouts that work well on all devices.

1

Set up the basic HTML structure

Create a basic HTML5 page with lang="en", charset="UTF-8", and a viewport meta tag for responsive design. Include the Bootstrap 5 CSS CDN link inside the <head>. Add a <main> element inside the <body>.

Bootsrap

    
    
    Responsive Images
    


    
        
    

Hint

Remember to include the Bootstrap CSS link inside the <head> and add the viewport meta tag for mobile devices.

2

Add the image element

Inside the <main> element, add an <img> tag with the src attribute set to "https://via.placeholder.com/800x400" and the alt attribute set to "Sample landscape".

Bootsrap

    
    
    Responsive Images
    


    
        
    

Hint

Use the <img> tag with the exact src and alt values provided.

3

Make the image responsive with Bootstrap

Add the Bootstrap class img-fluid to the <img> tag inside the <main> element to make the image scale nicely on all screen sizes.

Bootsrap

    
    
    Responsive Images
    


    
        
        
    

Hint

Add class="img-fluid" inside the <img> tag to make it responsive.

4

Add a caption below the image

Below the <img> tag inside the <main>, add a <figcaption> element with the text "A beautiful landscape". Wrap the <img> and <figcaption> inside a <figure> element for semantic grouping.

Bootsrap

    
    
    Responsive Images
    


    
        
        
    

Hint

Use a <figure> to group the image and caption, and add a <figcaption> with the exact text below the image.

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