##### 1:1 Aspect Ratio

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>

##### 4:3 Aspect Ratio

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>

##### 3:2 Aspect Ratio

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>

##### 16:9 Aspect Ratio

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>

##### Figures

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.

A caption for the above 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>

##### Image With Radius

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>

##### Image Left Align

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="...">

##### Image Center Align

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="...">

##### Image Right Align

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="...">

##### Rounded Image

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>

##### Image Thumbnail

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>

##### Rounded Thumbnail

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>

Theme Customization

###### Layout:

##### Vertical

##### Horizontal

##### Semi Box

###### Content Width:

##### Default

##### Box

###### Layout Direction:

##### LTR

##### RTL

###### Layout Mode:

##### Light

##### Dark

##### System

###### Sidebar Size:

##### Default

##### Medium

##### Icon

##### Icon hover

###### Sidebar Color:

##### Light

##### Dark