Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Responsive Images in Bootstrap 5
Responsive Images: Learn how to make images scale properly across different screen sizes and devices.
Why Responsive Images Matter
Responsive images adapt to different screen sizes, ensuring they look great on mobile, tablet, and desktop devices. They prevent horizontal scrolling and improve user experience.
❌ Without .img-fluid
✅ With .img-fluid
Scales to fit container
The .img-fluid Class
How .img-fluid Works
The .img-fluid class applies these CSS properties:
.img-fluid {
max-width: 100%;
height: auto;
}What it does:
max-width: 100%- Never exceeds container widthheight: auto- Maintains aspect ratio- Works with any container size
- Compatible with all breakpoints
When to use:
- All images in responsive layouts
- Hero images and banners
- Content images in articles
- Product images in e-commerce
- Gallery and portfolio images
Basic Implementation
Code Example
<Image width={600} height={400}
src="image.jpg"
alt="Description"
class="img-fluid"
width="800"
height="400"
/>Tip: Include width and height attributes to prevent layout shifts.
Responsive Images in Different Containers
Container Comparison
Full Width Container
Takes 100% of container width
Medium Container (col-md-8)
Scales to fit 8 columns on medium+ screens
Small Container (col-md-4)
Scales to fit 4 columns on medium+ screens
<!-- Full width -->
<div class="col-12">
<Image width={600} height={400} src="image.jpg" class="img-fluid" alt="Full width">
</div>
<!-- Medium width -->
<div class="col-md-8">
<Image width={600} height={400} src="image.jpg" class="img-fluid" alt="Medium width">
</div>
<!-- Small width -->
<div class="col-md-4">
<Image width={600} height={400} src="image.jpg" class="img-fluid" alt="Small width">
</div>Advanced Responsive Techniques
Srcset and Sizes Attributes
For optimal performance, use srcset and sizes attributes to serve different image resolutions:
<Image width={600} height={400}
src="image-800.jpg"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 576px) 100vw,
(max-width: 768px) 50vw,
33vw"
alt="Responsive image"
class="img-fluid"
/>How srcset works:
- Browser chooses appropriate image based on screen size
- Reduces bandwidth usage on mobile devices
- Provides high-quality images on retina displays
- Improves page load performance
Responsive Image Gallery
Image 1: Responsive in grid
Image 2: Responsive in grid
Image 3: Responsive in grid
Image 4: Responsive in grid
Image 5: Responsive in grid
Image 6: Responsive in grid
Image 7: Responsive in grid
Image 8: Responsive in grid
<!-- Responsive image gallery -->
<div class="row g-3">
<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
<div class="card h-100">
<Image width={600} height={400}
src="image.jpg"
class="card-img-top img-fluid"
alt="Gallery image"
/>
<div class="card-body">
<p class="card-text">Description</p>
</div>
</div>
</div>
<!-- Repeat with different column classes -->
</div>Column Breakpoints:
.col-sm-6: 2 columns on mobile.col-md-6: 2 columns on tablet.col-lg-4: 3 columns on laptop.col-xl-3: 4 columns on desktop
Gallery Best Practices:
- Use consistent aspect ratios
- Optimize images for web
- Add descriptive alt text
- Consider lazy loading
- Provide image captions
Lazy Loading Images
Improve Performance with Lazy Loading
Loads immediately
Loads when scrolled into view
<!-- Above the fold - load immediately -->
<Image width={600} height={400}
src="hero-image.jpg"
class="img-fluid"
alt="Hero image"
/>
<!-- Below the fold - lazy load -->
<Image width={600} height={400}
src="content-image.jpg"
class="img-fluid"
alt="Content image"
loading="lazy"
/>
<!-- With modern browser support -->
<Image width={600} height={400}
src="image.jpg"
class="img-fluid"
alt="Lazy loaded"
loading="lazy"
decoding="async"
/>Lazy Loading Considerations:
- Use for below-the-fold images: Improves initial page load
- Avoid for hero images: Critical content should load immediately
- Browser support: Modern browsers support native lazy loading
- Fallback: Consider JavaScript polyfills for older browsers
Common Issues and Solutions
| Issue | Cause | Solution |
|---|---|---|
| Image too small on large screens | Fixed width attribute or small source image | Use larger source image with .img-fluid |
| Image blurry on high-DPI screens | Low-resolution source image | Use high-res images with srcset |
| Layout shift during loading | Missing width/height attributes | Always include width and height attributes |
| Poor performance | Large file sizes | Optimize images, use modern formats, lazy load |
| Inconsistent aspect ratios | Images with different proportions | Use CSS aspect-ratio or object-fit |
Best Practices Checklist
Responsive Image Checklist
Performance Tips:
- Image compression: Use tools like Squoosh, TinyPNG
- Modern formats: WebP provides 30% smaller files than JPEG
- CDN delivery: Use image CDNs for faster loading
- Cache headers: Implement proper caching strategies
- Responsive breakpoints: Create multiple image sizes
