Bootstrap Images
Bootstrap provides helpful utility classes to make images responsive, rounded, aligned, and styled—without custom CSS.
Here’s a complete guide 👇
📌 1. Responsive Image
Use .img-fluid to make images scale nicely with the page.
✔ Automatically fits the container
✔ Maintains aspect ratio
🖼 2. Rounded & Styled Images
Bootstrap includes built-in border-radius classes.
| Class | Effect |
|---|---|
.rounded | Soft corners |
.rounded-circle | Makes image circular (if square) |
.img-thumbnail | Gives border + padding |
🎯 3. Image Alignment
Center Image
Float Images
Clear Floats
↔️ 4. Responsive Alignment with Breakpoints
✔ Center on small screens
✔ Float right on medium+ screens
📁 5. Image in Cards (Common Use)
🌄 6. Responsive Image Gallery Example
📍 7. Figure Image with Caption
Bootstrap supports semantic <figure> tags.
🎉 Summary Table
| Feature | Class |
|---|---|
| Responsive Image | img-fluid |
| Rounded Corners | rounded |
| Circle Image | rounded-circle |
| Border Image | img-thumbnail |
| Center | mx-auto d-block |
| Float Left/Right | float-start, float-end |
| Caption Support | figure, figure-caption |
