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">
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">
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">
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">
