Images & Figures

Responsive image

Use .img-fluid class to the img tag to get responsive image.

...
<div class="text-center">
    <img src="../assets/images/media/media-48.jpg" class="img-fluid" alt="...">
    </div>
Image With Radius

Use .rounded class along with .img-fluid to get border radius.

...
<div class="text-center">
    <img src="../assets/images/media/media-49.jpg" class="img-fluid rounded" alt="...">
    </div>
Rounded Image

Use .rounded-pill class to img tag to get rounded image.

...
<div class="text-center">
    <img src="../assets/images/media/media-50.jpg" class="img-fluid rounded-pill" alt="...">
    </div>
Image Left Align
...
<img class="rounded float-start" src="../assets/images/media/media-53.jpg" alt="...">
Image Center Align
...
<img class="rounded mx-auto d-block" src="../assets/images/media/media-55.jpg" alt="...">
Image Right Align
...
<img class="rounded float-end" src="../assets/images/media/media-54.jpg" alt="...">
Figures
...
A caption for the above image.
...
A caption for the above image. 
<figure class="figure">
    <img class="bd-placeholder-img figure-img img-fluid rounded card-img" src="../assets/images/media/media-56.jpg" alt="...">
    <figcaption class="figure-caption">A caption for the above image.
    </figcaption>
    </figure>
    <figure class="figure float-end">
    <img class="bd-placeholder-img figure-img img-fluid rounded card-img" src="../assets/images/media/media-57.jpg" alt="...">
    <figcaption class="figure-caption text-end">A caption for the above image.
    </figcaption>
    </figure>
Image Thumbnail

Use .img-thumbnail to give an image a rounded 1px border.

...
<div class="text-center">
    <img src="../assets/images/media/media-51.jpg" class="img-thumbnail" alt="...">
    </div>
Rounded Thumbnail

Use .rounded-pill along with .img-thummbnail to get radius.

...
<div class="text-center">
    <img src="../assets/images/media/media-52.jpg" class="img-thumbnail rounded-pill" alt="...">
    </div>