```
`.img-fluid` applies exactly two declarations:
```css
.img-fluid {
max-width: 100%;
height: auto;
}
```
That is the whole thing. `max-width: 100%` means the image never renders wider than its container. `height: auto` keeps the aspect ratio intact as the width shrinks. Together they make an image scale down gracefully inside any column, card, or container.
Two things `.img-fluid` does **not** do:
1. It never scales an image **up** beyond its intrinsic size. A 400px-wide photo in a 800px column stays 400px wide.
2. It does nothing about which file loads. A 4000px original still downloads in full on a phone.
If you want an image to fill its container even when that means upscaling, use `w-100` instead — but check the result at large sizes, because upscaled photos look soft.
### `.img-thumbnail`
```html
```
Adds a rounded 1px border, some padding, and a white background — the classic framed-thumbnail look. It inherits `max-width: 100%` from the reboot styles, so it is safe in narrow columns. It is purely decorative styling; it does not resize the underlying file. A thumbnail gallery built with `.img-thumbnail` should still point at genuinely small image files, not scaled-down versions of originals.
## Alignment
Images are inline elements by default, so alignment behaves differently depending on whether you treat them as blocks or floats.
### Centering
The most common pattern for a standalone centered image:
```html
```
`d-block` makes the image a block element so margins apply; `mx-auto` centers it horizontally. For an image inside a paragraph of text, wrap it and center the wrapper instead:
```html
Body text wraps around the floated image...
``` `float-start` aligns left in LTR layouts, `float-end` right. Add margin utilities (`me-3`, `mb-2`) so text does not touch the image. Clear the float afterward with a `` when the next section must start below the image. On small screens a floated image often looks cramped. A common pattern is to float only from the `md` breakpoint up: ```html
```
Below `md`, the image sits inline at full column width; above it, text wraps.
## Figures and Captions
For images that need captions, use the figure component rather than hand-rolling a div:
```html
```
- `rounded` — small radius on all corners
- `rounded-3` — larger radius
- `rounded-circle` — perfect circle (the old `.rounded-circle` replaced Bootstrap 4's `.rounded-circle` behavior of `.img-circle`; same idea)
- `rounded-top` / `rounded-bottom` / `rounded-start` / `rounded-end` — radius on specific sides
One caution: `rounded-circle` crops visually by clipping, not by trimming pixels. Feed it a square source image, or faces drift off-center. Cropping to a square before upload beats fighting it with CSS object-position hacks.
## Images Inside Components
### Cards
Card images sit at the top edge and need their top corners clipped to match the card's radius:
```html
Lightweight grip for mixed terrain.
```
How to read this: `srcset` lists candidate files with their intrinsic widths. `sizes` tells the browser how wide the image will render — here, full viewport width below the `lg` breakpoint (where a Bootstrap column spans the row) and half viewport above it (a typical `col-lg-6`). The browser picks the smallest file that still looks sharp.
The `sizes` value is where people go wrong, because it must describe your **layout**, and in Bootstrap the layout is the grid. Rough mapping:
| Layout | Good `sizes` hint |
|--------|-------------------|
| Full-width hero | `100vw` |
| `col-12 col-lg-6` two-column | `(min-width: 992px) 50vw, 100vw` |
| Three cards per row on desktop | `(min-width: 992px) 33vw, 100vw` |
| Fixed-width sidebar image | `300px` |
Get `sizes` approximately right and browsers pick well. Get it wrong (or omit it — the default is `100vw`) and browsers overshoot, downloading desktop files for phones. Our [complete responsive images guide](/guides/responsive-images-complete-guide) goes deeper on descriptor math.
Generating those width variants is a build-step job or a CDN job. Doing it by hand for every image does not survive contact with a real site.
### Art Direction with `picture`
When different breakpoints need differently **cropped** images — not just differently sized ones — use `picture`:
```html
```
With both attributes present, the browser computes the aspect ratio before load and reserves the exact box. This works together with `height: auto` from `.img-fluid` — modern browsers derive `aspect-ratio` from the attributes and let CSS scale the box proportionally. Setting the attributes does **not** force a 1200px render; it only declares the shape.
For images whose rendered ratio differs from the source ratio (cropped card covers, for instance), declare the ratio in CSS instead:
```css
.card-img-cover {
aspect-ratio: 3 / 2;
object-fit: cover;
width: 100%;
}
```
Audit trick: run Lighthouse, and if CLS shows entries like "image elements [CLS] do not have explicit width and height," fix those first. They are free wins. Our [Core Web Vitals guide](/guides/core-web-vitals-images) has the full checklist.
## Lazy Loading
Native lazy loading is one attribute:
```html
```
Bootstrap 5 dropped jQuery and ships no JavaScript lazy loader — correctly, because `loading="lazy"` is supported in every current browser and needs no library. Old tutorials recommending `data-src` swap-ins with Lozad or lazysizes are obsolete for new work.
Rules that keep lazy loading from backfiring:
- **Never lazy-load above-the-fold images**, especially heroes and carousel first slides. Deferring the LCP image is a self-inflicted regression.
- **Always pair `loading="lazy"` with `width` and `height`.** Lazy images without reserved space cause *more* shift, because the shift happens later and closer to user interaction.
- Below-the-fold grids, article bodies, and long galleries are ideal candidates.
For finer control over the loading threshold or priority hints, see our [lazy loading strategies guide](/guides/lazy-loading-strategies).
## Grid Pitfalls
A few failure modes show up again and again when bootstrap images meet the grid:
**Overflowing columns.** An image with an intrinsic width wider than its column overflows horizontally unless something constrains it. Any image that lives in a column should carry `img-fluid` (or be covered by a global rule). One global safety net many teams add:
```scss
img {
max-width: 100%;
height: auto;
}
```
Bootstrap's reboot already includes this for `img`, `svg`, `video` — so overflow usually comes from third-party embeds or overridden styles, not plain images. Check there first when a page scrolls sideways.
**Stretched images.** The opposite problem: `w-100` on a small source image stretches it past its intrinsic size and it turns blurry. Use `w-100` only when the source is at least as large as the biggest rendering.
**Uneven card rows.** Flexbox stretch makes cards equal height, but their images are not. Fix at the source level (crop to a common ratio) or the CSS level (`aspect-ratio` + `object-fit: cover`), not by fiddling with per-card margins.
**Row gutters and captions.** A figure inside a `row` without `g-0` gets gutter padding that makes the image narrower than sibling content. Decide intentionally whether the image aligns to the gutter or inside it.
## An Optimization Workflow That Fits Bootstrap
Classes and attributes handle layout. File weight is a separate pipeline. A workflow that holds up in practice:
1. **Pick modern formats.** Encode delivery images as WebP at minimum; add AVIF where your encoder supports it. Both beat JPEG by double-digit percentages at matched quality.
2. **Generate width variants.** Something must produce the 640/1280/1920 files your `srcset` references — a build step, or a CDN that derives variants on demand.
3. **Compress once, centrally.** Batch pipelines keep quality consistent; our [batch processing workflows guide](/guides/batch-image-processing-workflows) compares approaches.
4. **Let a CDN do resizing.** Instead of pre-generating variants, store one high-quality master and let URL parameters produce each size on the fly. With Sirv, the same master serves every breakpoint:
```html
```
The CDN resizes, compresses, converts format, and caches each variant — no build step, no variant zoo in storage. This pairs well with interactive presentation too: product pages that need zoomable galleries or 360 spins can layer the [Sirv Media Viewer](https://sirv.com/help/articles/sirv-media-viewer/) on top of the same masters, and marketing teams can retouch or cut out backgrounds themselves in [Sirv Studio](https://www.sirv.studio/) without touching the codebase. If your Bootstrap project has outgrown hand-resized folders, you can [try Sirv free](https://my.sirv.com/#/signup) and point it at your existing images.
5. **Verify.** Run Lighthouse on a throttled mobile profile and confirm: no missing dimension warnings, LCP image not lazy-loaded, transfer sizes in the hundreds-of-KB range for heroes rather than megabytes.
## Quick Reference
| Task | Class / attribute |
|------|-------------------|
| Scale down within container | `img-fluid` |
| Framed thumbnail | `img-thumbnail` |
| Center standalone | `mx-auto d-block` |
| Center inline | wrapper with `text-center` |
| Float left / right | `float-start` / `float-end` |
| Caption | `figure` + `figure-caption` |
| Circle avatar | `rounded-circle` |
| Card cover | `card-img-top` |
| Carousel slide | `d-block w-100` |
| Responsive sources | `srcset` + `sizes` (manual) |
| Format fallbacks | `picture` + `source` |
| Defer offscreen | `loading="lazy"` |
| Prevent CLS | `width` + `height` attributes |
## Takeaways
Bootstrap gives you layout classes; the web platform gives you responsive sources; performance comes from combining them deliberately. The recurring theme of this guide: every Bootstrap image class answers "how does this render," and none answer "what downloads." Close that gap with `srcset`/`sizes` or CDN resizing, stamp `width`/`height` on everything, lazy-load only what is offscreen, and a stock Bootstrap template can hit the same image-performance numbers as a hand-tuned framework setup.
## Sources
- [Images, Bootstrap documentation](https://getbootstrap.com/docs/5.3/content/images/)