Images

Images

Bootstrap 5 has several classes to make images responsive and rounded.

Responsive images

Use .img-fluid to make an image scale nicely with the parent element. It applies max-width: 100% and height: auto:

<img src="pic.jpg" class="img-fluid" alt="Responsive image">

Rounded corners

<img src="pic.jpg" class="rounded" alt="Rounded">
<img src="pic.jpg" class="rounded-circle" alt="Circle">

• .rounded adds rounded corners.
• .rounded-circle makes the image a circle.

Thumbnail

<img src="pic.jpg" class="img-thumbnail" alt="Thumbnail">

.img-thumbnail adds a thin border and padding, like a photo frame.

Centering

Images are inline elements, so use .d-block with .mx-auto to center:

<img src="pic.jpg" class="img-fluid d-block mx-auto" alt="Centered">

TL;DR

• .img-fluid makes images responsive.
• .rounded adds corners, .rounded-circle makes a circle.
• .img-thumbnail adds a border and padding.
• .d-block mx-auto centers an image.