Images and figures

By default an HTML image is shown at its real size and may stick out of a phone screen. Bootstrap adds a few classes that make images responsive, style them and caption them.

A responsive image

The img-fluid class sets max-width: 100% and height: auto: the image shrinks with its parent and keeps its proportions.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<img src="/media/photo-800x500.jpg" class="img-fluid" alt="A team discussing a plan">

The 800-pixel image shrank to the preview width without being cut off. Without img-fluid the window would get a horizontal scrollbar.

Styling

Class	What it does
`img-thumbnail`	A white rounded frame, like a photo print
`rounded`, `rounded-circle`	Rounding or a circle
`float-start`, `float-end`	Text wraps around
`d-block mx-auto`	A centered block image
`object-fit-cover`	Fill the block, cropping the edges

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="d-flex align-items-center gap-3">
  <img src="/media/photo-200x200.jpg" class="rounded-circle" width="64" height="64" alt="Anna Smith">
  <div>
    <strong>Anna Smith</strong>
    <div class="text-body-secondary small">Project manager</div>
  </div>
</div>

A round 64 by 64 pixel avatar next to a name — this is how a user looks in the admin dashboard header or a review author on the landing page.

An image with a caption

For an image with a caption HTML has <figure> and <figcaption>. Bootstrap styles them with the figure, figure-img and figure-caption classes:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<figure class="figure">
  <img src="/media/photo-400x250.jpg" class="figure-img img-fluid rounded" alt="A screen with a report">
  <figcaption class="figure-caption text-center">A weekly report in Tasko</figcaption>
</figure>

Under the rounded image there is a small gray centered caption.

Video and ratios

A YouTube video is embedded with an <iframe> and cannot keep its proportions by itself. A ratio ratio-16x9 wrapper gives the block a 16:9 aspect ratio, and the <iframe> inside stretches over the whole block. There are also ratio-1x1, ratio-4x3 and ratio-21x9.

Common mistake

Writing alt as a formality — "image", "img1" — or not at all. A screen reader reads exactly this text, and if the image fails to load it is shown in its place. Describe what is in the picture. If the image is purely decorative, leave alt="" empty, but do not remove the attribute.

Thanks for reading!