Ensure 1:1 aspect ratio for images by applying .image-wrapper and .image-1x1 classes. This maintains a square shape for consistent image display.

<div class="image-wrapper image-1x1">
    <img src="assets/images/small/img-10.jpg" alt="1x1 Image" class="img-fluid">
</div>

Use 4:3 aspect ratio for images with the .image-wrapper .image-4x3 class. Apply this class to maintain a 4:3 ratio for your images and elements.

<div class="image-wrapper image-4x3">
    <img src="assets/images/small/img-2.jpg" alt="4x3 Image" class="img-fluid">
</div>

Use the 3:2 aspect ratio by applying the .image-wrapper .image-3x2 class to your elements. This ensures your images and content maintain a 3:2 ratio.

<div class="image-wrapper image-3x2">
    <img src="assets/images/small/img-3.jpg" alt="3x2 Image" class="img-fluid">
</div>

Maintain a 16:9 aspect ratio by using the .image-wrapper .image-16x9 class. Apply this class to ensure your images and elements keep a 16:9 ratio.

<div class="image-wrapper image-16x9">
    <img src="assets/images/small/img-7.jpg" alt="16x9 Image" class="img-fluid">
</div>

Use Bootstrap's <figure> component to display images with captions. Wrap the image in a <figure> tag and use <figcaption> for the caption below the image.

<figure class="figure mb-0">
    <img src="assets/images/avatar/avatar-1.jpg" class="figure-img img-fluid rounded" alt="...">
    <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Add a border radius to an image with the .rounded-* class. Use this class on the <img> tag for a rounded effect.

<div class="text-center">
    <img class="img-fluid rounded-5" src="assets/images/avatar/avatar-5.jpg" alt="...">
</div>

Left-align an image with the .float-start class on the <img> tag.

<img class="rounded float-start" src="assets/images/avatar/avatar-4.jpg" alt="...">

Center an image with .mx-auto and .d-block on the <img> tag.

<img class="rounded mx-auto d-block" src="assets/images/avatar/avatar-2.jpg" alt="...">

Right-align an image with the .float-end class on the <img> tag.

<img class="rounded float-end" src="assets/images/avatar/avatar-3.jpg" alt="...">

Create a rounded image with the .rounded-pill class. Apply this class to the <img> tag for a pill-shaped rounded effect.

<div class="text-center">
    <img class="img-fluid rounded-pill" src="assets/images/avatar/avatar-2.jpg" alt="...">
</div>

Style an image as a thumbnail with the .img-thumbnail class. Apply this class to the <img> tag for a bordered, rounded image.

<div class="text-center">
    <img class="img-thumbnail" src="assets/images/avatar/avatar-1.jpg" alt="...">
</div>

Use rounded thumbnails with .img-thumbnail and .rounded-pill on the <img> tag.

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