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 |
Example
<img src="/assets/images/building1.jpg" class="w-100 rounded" alt="Cinque Terre" >
<img src="/assets/images/building2.jpg" class="w-100 rounded-circle" alt="Cinque Terre" >
<img src="/assets/images/building3.jpg" class="w-100 img-thumbnail" alt="Cinque Terre" >
Image Alignment:
Align images using utility classes.
Class |
Alignment |
|---|---|
.float-start |
Left-aligned |
.float-end |
Right-aligned |
.mx-auto d-block |
Center-aligned |
Example
<img src="/assets/images/building1.jpg" class="float-start" style="width:25%" >
<img src="/assets/images/building2.jpg" class="float-end" style="width:25%">
<img src="/assets/images/building3.jpg" class="mx-auto d-block" style="width:25%">
Responsive Images:
To make images responsive, add the class .img-fluid. This ensures the image scales with its parent container.