img element and examples for opting images into responsive behavior and add lightweight styles to them all classes..img-fluid class to the .img-fluid class applies max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.<img src="images/960x250.jpg" class="img-fluid" alt="Bootstrap 4 Image">
The .img-thumbnail class shapes the image to a thumbnail (bordered):
<img src="images/200x170.jpg" class="img-thumbnail" alt="bootstrap 4 image" /> 
The Bootstrap 4 image alignments are mainly used two classes there are .float-left, .float-right .
<img src="images/200x170.jpg" class="rounded float-left" alt="bootstrap 4 img">
<img src="images/200x170.jpg" class="rounded float-right" alt="bootstrap 4 img"><img src="images/200x170.jpg" class="rounded mx-auto d-block" alt="Bootstrap 4 Images"><div class="text-center">
<img src="images/200x170.jpg" class="rounded" alt="Bootstrap 4 Images">
</div>You can use Bootstrap to render images with rounded corners or as a circle. This is acheived with the .rounded-* utility classes.
<img src="images/logo.png" class="rounded" alt="Bootstrap 4 image">
<img src="images/logo.png" class="rounded-circle" alt="Bootstrap 4 image">
<img src="images/logo.png" class="img-thumbnail" alt="Bootstrap 4 image">
<img src="images/logo.png" class="rounded-top" alt="Bootstrap 4 image">
<img src="images/logo.png" class="rounded-bottom" alt="Bootstrap 4 image">
<img src="images/logo.png" class="rounded-0" alt="Bootstrap 4 image">