Images & Figures
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.

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.

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.

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.

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.

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

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

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

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.

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

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.

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