YNEX - Bootstrap 5 Premium Admin & Dashboard Template

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-410.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

<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>

Switcher

Images & Figures