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