Bootstrap 5 Images

Apply Bootstrap classes on images to make responsive images, so they never become wider than their parent.

Bootstrap 5 Responsive images

Images in Bootstrap are made responsive with .img-fluid. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent width.

Example 1: Responsive image using .img-fluid class

<img src="dogs.jpg" class="img-fluid">
Bootstrap Responsive Image

Image thumbnails

Use .img-thumbnail to give an image a rounded 1px border appearance.

Example 2: Responsive image with thumbnail class

<img src="panda.jpg" class="img-fluid img-thumbnail">
Bootstrap Responsive Image with thumbnail

Rounded Image

Use .rounded-circle to round the image. Bootstrap adds a property border-radius: 50%.

Example 3: Rounded image with rounded-circle class

<img src="tiger.jpg" class="img-fluid img-thumbnail rounded-circle">
Bootstrap Rounded Image

Aligning images

In Bootstrap, images can be aligned using float-start to align left, float-end to align right, and mx-auto with d-block to align center.

<img src="..." class="rounded float-start" alt="left align">
<img src="..." class="rounded float-end" alt="right align">
<img src="..." class="rounded mx-auto d-block" alt="center align">