Bootstrap4 Image Shapes

Rounded Images

The .rounded class can be used to display images with rounded corners:

Example

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

Ellipse Images

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

Example

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

Thumbnails

The .img-thumbnail class is used to set image thumbnails (images with borders):

Example

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

Image Alignment

Use the .float-right class to align images to the right, and the .float-left class to align images to the left:

Example

<img decoding="async" src="paris.jpg" class="float-left"> 
<img decoding="async" src="cinqueterre.jpg" class="float-right">

Centered Image

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

Example

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

Responsive Images

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

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