Images and Figures

A few classes help you control how images and figures work.

Images

img-fluid img-thumbnail

Try it

There are two specific classes related to images, the img-fluid class will automatically let you build responsive images. It sets the width of the image to 100% and the height to auto so it scales with the parent.

There's a separate class called img-thumbnail that creates a thumbnail image with a slight outline. I don't really use this one very often, but it looks nice.

Floats

float-start float-end

clearfix

Try it

To align element to content you can use two classes. Bootsrap 5 has RTL, or right to left support to whereas you may think of the float-start as a float-left and float-end and float-right.

Containers with floated elements can lose track of the height of floated items, so Bootstrap provides a clearfix class that takes care of this.

Figures

figure figure-img figure-caption

Try it

Figures is an HTML element that lets you specify an image an it's text. Bootsrrap provides a few classes that helps set up a certain style for these elements.