Responsive Image
Add the .img-fluid class to an image to make it expand to the width of its container.
<div class="col-6 col-sm-3">
<img alt="responsive image" class="img-fluid" src="/images/thumbnail_placeholder.gif" />
</div>
<div class="col-3 col-sm-2">
<img alt="responsive image" class="img-fluid" src="/images/thumbnail_placeholder.gif" />
</div>Image Shapes
Add the .rounded, .rounded-circle, or .img-thumbnail classes to an img to quickly style the borders.
The .rounded-0 class removes the border-radius styles.
<div class="col-4">
<img alt="responsive image with rounded edges" class="img-fluid rounded" src="/images/thumbnail_placeholder.gif"/>
</div>
<div class="col-4">
<img alt="responsive circle image" class="img-fluid rounded-circle" src="/images/thumbnail_placeholder.gif"/>
</div>
<div class="col-4">
<img alt="responsive thumbnail image" class="img-fluid img-thumbnail" src="/images/thumbnail_placeholder.gif"/>
</div>