Bootstrap 5.3 Image Patterns
Responsive Images
Use .img-fluid to make images scale with parent width.
Resize the browser to see the image scale.
Image Thumbnails
Use .img-thumbnail for a rounded 1px border appearance.
Rounded Variants
No class
.rounded
.rounded-circle
.rounded-0
.rounded-pill
Rounded Sizes
Image Alignment with Floats
Float Start (Left)
This paragraph demonstrates text wrapping around a floated image. The image uses .float-start to float to the left, and .me-3 adds margin to the right. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit.
Float End (Right)
This paragraph demonstrates text wrapping around a right-floated image. The image uses .float-end to float to the right, and .ms-3 adds margin to the left. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit.
Centered Block Image
Use .d-block and .mx-auto to center a block-level image.
Picture Element for Art Direction
Use the <picture> element to serve different images based on viewport size.
Resize the browser to see different images load at different breakpoints.