Bootstrap 4 provides several utility classes for serving responsive images in multiple shapes and alignments.

Responsive images

Bootstrap 4 provides .img-fuild utility class to make an image responsive. This class applies max-width: 100% and height: auto to the image. Responsive images auto scale to fit the size of the screen.

<img class="img-fluid" src="..." alt="Responsive Image" />

Image thumbnails

You can use .img-thumbnail class to apply rounded border to the image:

<img class="img-thumbnail" src="..." alt="Avatar" />

Following is how it will look like:

Example Thumbnail

Aligning images

Images can be aligned left or right with helper float classes or text alignment classes.

Left Aligned Image Right Aligned Image
<img class="rounded float-left" src="..." alt="Left Aligned Image" />
<img class="rounded float-right" src="..." alt="Right Aligned Image" />

Images can be centered with .mx-auto and .d-block utility classes.

<img class="rounded mx-auto d-block" src="..." alt="Centered Image" />
Centered Image

Image shapes

You can also use border radius utilities classes (.rounded-*) to show images in different shapes:

Rounded Image Circle Image
<img class="rounded" src="..." alt="Rounded Image" />
<img class="rounded-circle" src="..." alt="Circle Image" />

That's all for serving responsive images in Bootstrap 4.