Bootstrap 5 Images


To work with images in Bootstrap 5, you can use various classes and utilities to control their size, alignment, and responsiveness.

Image Shapes

  • .rounded
  • .rounded-circle
  • .img-thumbnail

Rounded Corners

Use .rounded class to add rounded corners to an image.

Example 
<img src="1.jpg" class="rounded" alt="Image not found">
Try it Yourself

Output:


Circle

For circular images, apply .rounded-circle class.

Example 
<img src="1.jpg" class="rounded-circle" alt="Image not found">
Try it Yourself

Output:


Image Thumbnail

.img-thumbnail class adds a border and padding to an image, giving it a thumbnail (bordered) appearance.

Example 
<img src="1.jpg" class="img-thumbnail" alt="Image not found">
Try it Yourself

Output:


Aligning Images

You can align images using Bootstrap's utility classes like .float-start and .float-end. These classes are useful when you want to align an image to the left or right of the surrounding content.

Example 
<img src="3.jpg" class="float-start" alt="Image not found">
<img src="2.jpg" class="float-end" alt="Image not found">
Try it Yourself

Output:


Centered Images

Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) to the image

Example 
<img src="1.jpg" class="mx-auto d-block" alt="Image not found">
Try it Yourself

Output:


Responsive Images

  • The easiest way to make an image responsive is by adding the .img-fluid class to the <img> element.
  • This class ensures that the image scales proportionally with the width of its parent container.
  • The .img-fluid class applies max-width:100%; and height:auto; to the image
Example 
<img src="4.jpg" class="img-fluid" alt="Image not found">
Try it Yourself

Output: