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.