Bootstrap 5 Learning Kit

Page Navigation:

Images

Default

Normal image

Responsive

Responsive image

Rounded

Image with rounded corners

Thumbnail

Image thumbnail

Alignment

Float

Image floated left Image floated right

Spacing utilities

Left-aligned image Centered image Right-aligned image

Text alignment

Left-aligned image
Centered image
Right-aligned image

Picture element

If using the <picture> element put .img-* classes on the <img> tag and not the <picture> tag.

Image in picture tag