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