Bootstrap 5 Image Shapes

Rounded Images

The .rounded class can make an image display with rounded corners:

Example

<img decoding="async" src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">

Ellipse Image

The .rounded-circle class can set an elliptical image:

Example

<img decoding="async" src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">

Thumbnail

The .img-thumbnail class is used to set a thumbnail image (image with a border):

Example

<img decoding="async" src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">

Image Alignment

Use the .float-start class to align the image to the left, and the .float-end class to align the image to the right:

Example

<img decoding="async" src="paris.jpg" class="float-start"> 
<img decoding="async" src="cinqueterre.jpg" class="float-end">

Center Image

Use the .mx-auto (margin:auto) and .d-block (display:block) classes to center align the image:

Example

<img decoding="async" src="paris.jpg" class="mx-auto d-block">

Responsive Images

Images come in various sizes, and we need them to adapt automatically based on screen size.

We can set responsive images by adding the .img-fluid class to the <img> tag.

The .img-fluid class sets max-width: 100%; and height: auto;:

Example

<img decoding="async" class="img-fluid" src="img_chania.jpg" alt="Chania">