Images are a key part of any website. With Bootstrap, you can easily make images responsive, rounded, circular, or even apply thumbnail styles—all without writing custom CSS. These image utility classes enhance design and maintain consistency across your project.
️ Responsive Images
Use the .img-fluid class to make images scale nicely to the parent element. This makes images responsive automatically.
-
✅ Automatically resizes image based on screen width.
-
✅ Adds
max-width: 100%andheight: auto.
Image Shapes
Bootstrap provides utility classes to change image shape instantly:
| Class | Result |
|---|---|
.rounded |
Slightly rounded corners |
.rounded-circle |
Fully circular image |
.img-thumbnail |
Adds border and padding |
Example:
Image Alignment
Use Bootstrap’s text alignment classes or float utilities to align images:
Or use text alignment:
Image Inside Responsive Layouts
When using images inside a grid or flexbox container, combine .img-fluid with column classes for full responsiveness:
Advanced: Image with Caption
Use Bootstrap’s figure element for semantic markup:
-
✅ Adds semantic meaning
-
✅ Useful for galleries, portfolios, and blogs
✅ Conclusion
Bootstrap makes it incredibly easy to work with images. From simple responsive scaling to styled circular profile photos, all you need is a few classes. This saves time, ensures consistency, and improves the visual appeal of your site—without touching CSS.
