Image
Utility classes for responsive images, thumbnails, and object-fit control.
When to use
- Making images responsive within fluid layouts
- Displaying image thumbnails with borders
- Controlling how images fill their containers
Responsive image
Scales with parent container, never exceeds natural width.
Thumbnail
Adds padding, border, and rounded corners for a framed look.
Object fit
Control how an image fills its container.
CSS classes
| Class | Description |
|---|---|
.img-fluid | max-width: 100%; height: auto — responsive scaling |
.img-thumbnail | Bordered thumbnail with padding and radius |
.img-cover | object-fit: cover — fills container, crops excess |
.img-contain | object-fit: contain — fits inside container, letterboxed |
Accessibility
- Always provide a descriptive
altattribute - Decorative images: use
alt=""andaria-hidden="true" - Use
<figure>and<figcaption>for images with captions — see Figure