Responsive images
Images in Bootstrap are made responsive with .img-fluid
. max-width: 100%;
and height: auto;
are applied to the image so that it scales with the parent element.
SVG images and Internet Explorer
In Internet Explorer 10 and 11, SVG images with .img-fluid
are disproportionately sized. To fix this, add width: 100%;
or .w-100
where necessary. This fix improperly sizes other image formats, so Bootstrap doesn’t apply it automatically
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.