Images
Responsive images
Images in Bootstrap are made responsive with
.img-fluid
. This applies
max-width: 100%;
and
height: auto;
to the image so that it scales with the parent width.
Image thumbnails
In addition to our
border-radius utilities
, you can use
.img-thumbnail
to give an image a rounded 1px border appearance.
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.
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>