Bootstrap Images
Bootstrap provides utility classes to make images responsive and nicely shaped. The most important one is .img-fluid, which makes an image scale with its parent container instead of overflowing.
Additional classes let you round image corners, make images fully circular, or add a thin border and padding, similar to a thumbnail.
<img src="pic.jpg" class="img-fluid" alt="...">Responsive images
Add .img-fluid to any <img> to apply max-width: 100% and height: auto, so the image shrinks on smaller screens but never stretches beyond its natural size.
Image shapes
.rounded adds rounded corners, .rounded-circle makes a square image fully circular, and .img-thumbnail adds a bordered, padded frame around the image.
<img src="https://via.placeholder.com/600x300" class="img-fluid rounded" alt="Sample">An image that resizes with the screen and has rounded cornersimg-fluid keeps the image responsive while rounded softens its corners.
<img src="https://via.placeholder.com/150" class="rounded-circle" alt="Avatar">A perfectly circular profile-style imagerounded-circle is commonly used for avatar or profile pictures.
Key points
- .img-fluid makes images scale responsively.
- .rounded and .rounded-circle change the image's corner shape.
- .img-thumbnail adds a bordered frame with padding.
- Always include a meaningful alt attribute for accessibility.