Advertisement
Google Ad Slot: content-top
Bootstrap 5 Image
In Bootstrap 5, handling images is simple and offers various utilities for styling, responsiveness, and alignment. Here's a guide to using images effectively:
Image Shapes:
Bootstrap provides utility classes to create rounded, circular, or thumbnail-style images:
Rounded Corners
Circle
Thumbnail
|
Class |
Effect |
|---|---|
|
.rounded |
Adds rounded corners |
|
.rounded-circle |
Makes the image circular |
|
.img-thumbnail |
Adds padding and a border |
Image Alignment:
Align images using utility classes.
|
Class |
Alignment |
|---|---|
|
.float-start |
Left-aligned |
|
.float-end |
Right-aligned |
|
.mx-auto d-block |
Center-aligned |
Responsive Images:
To make images responsive, add the class .img-fluid. This ensures the image scales with its parent container.