Responsive images
Responsive images shrink to fit their container instead of overflowing on small screens.
In this page:
Syntax
<img src="image.jpg" class="img-fluid" alt="...">
<img src="image.jpg" class="img-thumbnail" alt="...">Responsive images
Add .img-fluid to give an image max-width: 100% and height: auto. Use .img-thumbnail for a bordered look, .rounded and .rounded-circle for shapes, and alignment utilities for placement.
Add width and height attributes to avoid layout shift and the picture element for art direction.
Note:
Set width and height attributes to reserve space while loading.
Example: Responsive images
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<img src="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='200'%3E%3Crect width='600' height='200' fill='%23712cf9'/%3E%3Ctext x='50%25' y='50%25' fill='white' font-size='32' text-anchor='middle' dy='.3em'%3E600 x 200 image%3C/text%3E%3C/svg%3E" class="img-fluid rounded mb-2" width="600" height="200" alt="Placeholder banner that scales down">
<p class="text-body-secondary">Resize the window: the image scales with img-fluid.</p>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Fixed pixel widths on images
- Missing alt text
- Huge unoptimised files
Chapter Summary
- img-fluid scales images
- img-thumbnail adds a border
- rounded utilities shape images
- Always provide alt text
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: