Images

Responsive images #

Images can be made responsive with .img-fluid. This applies max-width: 100% and height: auto to the image so that it scales with the parent width.

<!-- Responsive image -->
<div class="row">
  <div class="col-9 col-sm-6 col-md-5 mx-auto">
    <img src="..." class="img-fluid rounded" alt="...">
  </div>
</div>

Image thumbnails #

In addition to border utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.

<!-- Image thumbnail -->
<img src="..." class="img-thumbnail rounded" alt="..." width="200">

Aligning images #

You can use spacing, flexbox, text alignment, or even float utilities to align images in different ways. Flexbox is arguably the best way to align and place images in useful ways.

<!-- Aligning images using flexbox -->
<div class="d-flex justify-content-between">
  <img src="..." class="rounded" alt="..." width="120">
  <img src="..." class="rounded" alt="..." width="120">
</div>

Given below is another example of centering an image using display and margin.

<!-- Centering image using display and margin -->
<img src="..." class="d-block mx-auto rounded" alt="..." width="200">

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>