Images are the most common source of broken layouts on small screens. Bootstrap gives you a handful of classes that make images scale with their container, adds thumbnail and rounded styles, aligns them with utilities, and provides a figure component for captioned media. This lesson covers each of them, plus the ratio and object-fit helpers you need for uniform image grids.
img-fluidBy default an <img> renders at its natural pixel size and will overflow a narrow column. .img-fluid applies max-width: 100% and height: auto, so the image shrinks to fit but never stretches past its intrinsic size:
<div class="col-md-6">
<img src="dashboard.png" class="img-fluid" alt="Dashboard screenshot">
</div>Always include width and height attributes when you know them. The browser uses them to reserve space before the image loads, which prevents layout shift. img-fluid still lets the image scale down because height: auto overrides the attribute value.
<img src="product.jpg" class="img-thumbnail" alt="Product">
<img src="avatar.jpg" class="rounded-circle" alt="Avatar">
<img src="banner.jpg" class="rounded-3" alt="Banner">.img-thumbnail adds a 1px border, padding and a small border radius, useful for gallery previews..rounded, .rounded-{0-5}, .rounded-circle and .rounded-pill are the standard border-radius utilities and work on any element.Images are inline elements, so alignment depends on whether you treat them as text or as blocks:
| Goal | Classes |
|---|---|
| Float left or right with text wrapping | float-start / float-end |
| Center as a block | d-block mx-auto |
| Center inside a text-aligned parent | parent gets text-center |
| Push to the right in a flex row | ms-auto |
<img src="logo.png" class="d-block mx-auto" width="120" alt="Logo">
<p>
<img src="icon.png" class="float-start me-3" width="48" alt="">
Text wraps around the floated image on the left.
</p>Remember to clear floats with .clearfix on the parent if the text is shorter than the image.
When you serve different files per screen size, apply .img-fluid to the <img> inside <picture>, not to the <source> elements:
<picture>
<source media="(min-width: 992px)" srcset="hero-wide.jpg">
<source media="(min-width: 576px)" srcset="hero-medium.jpg">
<img src="hero-small.jpg" class="img-fluid" alt="Hero">
</picture>The figure component styles the native <figure> and <figcaption> elements:
<figure class="figure">
<img src="chart.png" class="figure-img img-fluid rounded" alt="Revenue chart">
<figcaption class="figure-caption">Revenue by quarter, FY2026.</figcaption>
</figure>.figure makes the element inline-block, .figure-img adds bottom margin and .figure-caption sets muted small text. Add text-end or text-center on the caption to align it.
ratio and object-fitCard grids look ragged when photos have different proportions. Wrap each image in a .ratio container and use an object-fit utility:
<div class="ratio ratio-4x3">
<img src="photo.jpg" class="object-fit-cover rounded" alt="Listing photo">
</div>Available ratios are ratio-1x1, ratio-4x3, ratio-16x9 and ratio-21x9; set a custom one with style="--bs-aspect-ratio: 50%". object-fit-contain, -cover, -fill, -scale and -none map to the CSS property and accept breakpoint infixes such as object-fit-md-cover.
alt text. Every meaningful image needs a description; decorative ones use alt="".w-100 instead of img-fluid. w-100 forces small images to upscale and blur; img-fluid only scales down.img-fluid to a background image. Background images need background-size: cover, or use the ratio helper with a real <img>.d-block before mx-auto. Auto margins only center block elements.What CSS does `.img-fluid` apply?
.img-fluid is the default class for any content image; keep width/height attributes to avoid layout shift..img-thumbnail, .rounded-* and .rounded-circle handle borders and shapes.float-start/float-end for wrapped text, or d-block mx-auto to center.<figure class="figure"> with .figure-img and .figure-caption for captioned media..ratio-* plus object-fit-* utilities produce uniform image boxes in grids.Next lesson: Colors, Backgrounds and Borders - the theme color palette, background and text color utilities, and border styling.