0
0
Bootsrapmarkup~5 mins

Responsive images in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Responsive images adjust their size to fit different screen sizes. This helps your website look good on phones, tablets, and computers.

When you want images to resize automatically on different devices.
When you want to save bandwidth by loading smaller images on small screens.
When you want your website to look neat and organized on any screen size.
When you want to avoid images overflowing outside their containers.
When you want to improve user experience by making images easy to see on all devices.
Syntax
Bootsrap
<img src="image.jpg" class="img-fluid" alt="Description">
img-fluid is a Bootstrap class that makes images scale with the parent container.
Always add alt text for accessibility and better SEO.
Examples
This image will resize automatically to fit the screen width.
Bootsrap
<img src="photo.jpg" class="img-fluid" alt="A beautiful landscape">
This image is responsive and has rounded corners using Bootstrap's rounded class.
Bootsrap
<img src="logo.png" class="img-fluid rounded" alt="Company logo">
This image is responsive and styled with a border and padding using img-thumbnail.
Bootsrap
<img src="avatar.jpg" class="img-fluid img-thumbnail" alt="User avatar">
Sample Program

This example shows a large placeholder image that resizes automatically when you change the browser size. The img-fluid class makes the image scale with its container.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Images Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="container mt-4">
    <h1>Responsive Images with Bootstrap</h1>
    <p>Resize the browser window to see the image adjust its size.</p>
    <img src="https://via.placeholder.com/800x400" class="img-fluid" alt="Sample placeholder image">
  </main>
</body>
</html>
OutputSuccess
Important Notes

Use img-fluid to make images scale nicely on all devices.

Always include alt text to describe images for screen readers.

Test your images by resizing the browser or using device simulation in browser DevTools.

Summary

Responsive images adapt to different screen sizes automatically.

Bootstrap's img-fluid class makes images scale with their container.

Adding alt text improves accessibility and SEO.