Bootstrap Images: Responsive, Rounded and Cropped Images

Bootstrap 5 has a handful of classes that solve most image problems: making images shrink to fit small screens, cropping them to a fixed shape, rounding or framing them, centering them, and adding captions. This guide covers each one with examples, plus responsive video embeds and the HTML attributes that make images load fast. Everything is for Bootstrap 5.3.

Responsive images with img-fluid

<img src="photo.jpg" class="img-fluid" alt="Team at the spring offsite" width="1200" height="800">

.img-fluid sets max-width: 100% and height: auto. The image never grows wider than its container, so it shrinks on phones and keeps its proportions, but it also never stretches beyond its natural size on large screens.

Always set width and height attributes with the image’s real dimensions. The browser uses them to reserve the right amount of space before the image loads, so the page doesn’t jump, and height: auto still keeps the image responsive.

To make an image always fill its container’s width, even past its natural size, use w-100 instead.

Crop images to the same shape with object-fit

A row of cards with photos of different sizes looks messy. Give the images a fixed height and crop them with .object-fit-cover:

<img src="product.jpg" class="w-100 object-fit-cover rounded" style="height: 220px;" alt="Ceramic mug">

Class	What it does
object-fit-cover	Fills the box and crops the overflow
object-fit-contain	Fits the whole image inside, leaving empty space
object-fit-fill	Stretches to fill, distorting the image
object-fit-scale	Like contain, but never enlarges a small image
object-fit-none	Natural size, cropped by the box

Each has responsive versions, such as object-fit-md-cover, to change the behavior from a breakpoint up. For a fixed shape that scales with the width, combine a ratio wrapper with object-fit-cover:

<div class="ratio ratio-4x3">
  <img src="product.jpg" class="object-fit-cover rounded" alt="Ceramic mug">
</div>

Rounded, circular, and framed images

<img src="photo.jpg" class="img-fluid rounded" alt="...">
<img src="avatar.jpg" class="rounded-circle" width="96" height="96" alt="Profile photo">
<img src="photo.jpg" class="img-thumbnail" alt="...">

• rounded rounds the corners, and rounded-1 to rounded-5 set smaller or larger radii.
• rounded-circle makes a circle when the image is square; on a rectangle it makes an oval. Use a square image, or a square box with object-fit-cover.
• img-thumbnail adds padding, a 1px border, and rounded corners, like a framed photo. It is also responsive.

The full list of corner and border classes is in the borders and shadows guide.

Center an image

An image is an inline element, so mx-auto alone doesn’t center it. Make it a block first:

<img src="logo.png" class="d-block mx-auto" alt="Company logo" width="200" height="60">

Or center it with its parent: <div class="text-center"><img src="..." alt="..."></div>. More techniques are in how to center a div in Bootstrap.

Align an image left or right of text

Float an image so text wraps around it:

<img src="author.jpg" class="float-start me-3 mb-2 rounded" width="120" height="120" alt="Author">
<p>Text wraps around the image on the right...</p>

float-end with ms-3 puts the image on the right. Add clearfix to the parent if the image hangs below the text. For a layout that also works on phones, a flex row is often cleaner: d-flex gap-3 with the image and text as children.

Image slideshows

To show several images in one space with arrows and autoplay, use a Bootstrap carousel.

Images with captions

Use a <figure> for an image with a caption:

<figure class="figure">
  <img src="chart.png" class="figure-img img-fluid rounded" alt="Monthly signups rising from 200 to 900">
  <figcaption class="figure-caption">Signups grew every month in 2026.</figcaption>
</figure>

figure-caption uses smaller, muted text. Add text-end or text-center to the caption to align it.

Images in cards

Card images have their own classes that round only the top corners to match the card: card-img-top, card-img-bottom, and card-img for a background image under card-img-overlay. The cards guide covers them, including equal-height card images with object-fit-cover.

Responsive video and iframe embeds

Videos and maps embedded with an iframe don’t scale on their own. Wrap them in a ratio container:

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID" title="Product demo video" allowfullscreen></iframe>
</div>

The ratios are ratio-1x1, ratio-4x3, ratio-16x9, and ratio-21x9. For a custom ratio, set --bs-aspect-ratio on the wrapper, for example style="--bs-aspect-ratio: 50%;" for 2:1.

Load images fast

Bootstrap styles images but doesn’t optimize them. A few HTML attributes make a big difference:

<img src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(min-width: 992px) 50vw, 100vw"
  width="1600" height="1067"
  loading="lazy" decoding="async"
  class="img-fluid" alt="Workshop in progress">

• srcset and sizes let the browser download a small file on phones and a large one on big screens.
• loading="lazy" delays images below the fold until the visitor scrolls near them. Don’t lazy-load the main image at the top of the page.
• Modern formats such as WebP and AVIF are much smaller than JPEG. Serve them with a <picture> element with a JPEG fallback, and put the Bootstrap classes on the <img> inside it.

Common image problems

The image overflows its container on phones. It has no img-fluid, or it has a fixed width in CSS. Add img-fluid and remove the fixed CSS width.

The image is stretched or squashed. It has both a fixed width and height in CSS. Use height: auto, or crop with object-fit-cover.

mx-auto doesn’t center the image. Add d-block, because auto margins only center block elements.

rounded-circle makes an oval. The image isn’t square. Use a square image or a square box with object-fit-cover.

FAQ

How do I make an image responsive in Bootstrap 5?

Add the img-fluid class. It sets max-width: 100% and height: auto, so the image shrinks to fit smaller screens while keeping its proportions. Use w-100 instead if it should always fill the container’s width.

How do I make all images the same size in Bootstrap?

Give the images the same height and add object-fit-cover with w-100, for example class="w-100 object-fit-cover" style="height: 200px". Each image fills the box and is cropped to the same shape without stretching.

How do I center an image in Bootstrap?

Add d-block mx-auto to the image, or put text-center on its parent element. An image is inline by default, so mx-auto alone won’t center it.

How do I make a round image in Bootstrap?

Add rounded-circle to a square image. For a non-square photo, make it square first, for example with equal width and height and object-fit-cover, or it will turn into an oval.

How do I make an embedded video responsive in Bootstrap?

Wrap the <iframe> in <div class="ratio ratio-16x9">. The video then keeps a 16:9 shape and scales to the container’s width. Use ratio-4x3, ratio-1x1, or ratio-21x9 for other shapes.