Bootsrapmarkup~30 mins

Responsive images in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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