Bootstrap components

Images and figures

How images adapt to their box and how they carry a caption.

Images should never break the layout: they scale with their container and keep their proportions. A figure ties an image to its caption.

When to use it

Use it

Make images fluid (img-fluid) so they never overflow.
Give every meaningful image alternative text; mark decorative ones with an empty alt.
Use a figure with a caption when the image needs explaining.

Don't

Put text inside an image.
Stretch an image: crop it instead.
Use an image for something a real icon can say.

Anatomy

An image (img) with a shape (rounded, rounded-circle, img-thumbnail), alone or inside a figure (figure) with a caption (figure-caption).

Variants and states

Shapes and figure

A caption for the image above, short and descriptive.

Combinations

Combination	Use it for
Fluid × thumbnail	`img-fluid` for every image; the thumbnail for a small preview with a frame.
Rounded × circle	Rounded for photos, a circle only for people.
Figure × caption	A figure when the image needs a sentence to be understood.

What Didactika changes and why

What we changed	Why it helps
The thumbnail frame is a hairline with a radius	It matches the borders of cards and fields instead of a heavy grey line.
The caption is small and muted	It explains the image without competing with the text around it.

Classes

Class	What it does
`img-fluid`	Scales down with its container
`img-thumbnail`	Border and padding
`rounded`, `rounded-circle`	Shape
`figure`, `figure-img`, `figure-caption`	Image with caption

In this version

Bootstrap 5.3 keeps its colours in CSS variables (--bs-*), so a theme recolours the component with one variable.

Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet.

Accessibility

Meaningful images have alt text that says what they show, not that they are images.
Decorative images have alt="".
A caption is real text, not part of the image.