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 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 Bootstrap doesn’t apply it automatically.
Images Types
There are a few different images classes: .rounded, .rounded-circle and .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.
Aligning Images (Left and Right)
You may also consider using <div class="clearfix"></div> to prevent parent elements collapsing leaving images hanging over.
Figures
Use the included .figure , .figure-img and .figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements. Images in figures have no explicit size, so be sure to add the .img-fluid class to your <img> to make it responsive.
Aligning the figure’s caption is easy with .text-end and .text-start or .text-center