Images

Allow images to become responsively resized, or add a bit of style to them.

Contents

Responsive Images

Images can be made to scale with their container width by using .img-fluid. This applies max-width: 100%; and height: auto; the image, allowing the aspect ratio to be maintained.

Generic responsive image
<img src="..." class="img-fluid" alt="Fluidly sized image">

SVG Images and IE 10

In Internet Explorer 10, SVG images with .img-fluid are disproportionately sized. To fix this, add width: 100% \9; where necessary. This fix improperly sizes other image formats, so we do not apply it automatically.

Image Thumbnail

Use .img-thumbnail to give an image a bordered appearance.

You might also want to check the border utilites for additional options.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera
<img src="..." alt="..." class="img-thumbnail">

Aligning Images

Align images with the helper float classes or text alignment classes. block-level images can be centered using the .mx-auto margin utility class.

A generic square placeholder image with rounded corners A generic square placeholder image with rounded corners
<img src="..." class="radius float-start" alt="...">
<img src="..." class="radius float-end" alt="...">
A generic square placeholder image with rounded corners
<img src="..." class="radius mx-auto d-block" alt="...">
A generic square placeholder image with rounded corners
<div class="text-center">
  <img src="..." class="radius" alt="...">
</div>

Picture

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>