Bootstrap Images

Bootstrap includes several classes that work with images. Image utility classes will allow you to easily create responsive images, add rounded corners and control alignment.

Responsive Images

The class .img-fluid can be used to make an image responsive and scale with the parent element.

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

Thumbnail Images

The .img-thumbnail class will add a rounded 1px border to the image. Customized border styles can be added to an image using Bootstraps border utility classes.

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

Aligning Images

Images can be aligned using float utility classes or the text alignment classes. If working with block-level images, the .mx-auto class can be used to center an image.

<!-- inline images -->
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">

<!-- text alignment -->
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

<!-- block image -->
<img src="..." class="rounded mx-auto d-block" alt="...">

Picture Element

If you are using the <picture> element to specify multiple <source> elements for a specific <img>, make sure to add the .img-* classes to the <img> and not to the <picture> tag.

​<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>