Nearby lessons
8 of 39🖼️ BS5 Images
📌 What Are Bootstrap 5 Image Utilities?
Bootstrap provides image classes: .img-fluid (responsive scaling), .img-thumbnail (thumbnail with border/padding), .rounded (rounded corners), .rounded-circle (circle), .rounded-pill (pill shape). Use with <img> or <figure> / <figcaption>.
📱 Responsive Images (.img-fluid)
.img-fluid – makes image scale with its container (max-width: 100%, height: auto). Use on <img> so images don’t overflow on small screens.
🖼️ Thumbnail Images (.img-thumbnail)
.img-thumbnail – adds padding and border (thumbnail style). Use for gallery thumbnails or small preview images.
⭕ Rounded Images (.rounded, .rounded-circle, .rounded-pill)
.rounded – small rounded corners. .rounded-circle – perfect circle (use with square images). .rounded-pill – fully rounded (pill shape). Add to the same element as the image.
📐 Image Alignment (.img-start, .img-end, .float-start, .float-end)
.img-start / .float-start – float left. .img-end / .float-end – float right. Use when images are inline with text. For block-level alignment, use .text-center on the parent.
✅ Image Best Practices
- Always include alt text for accessibility.
- Use .img-fluid so images scale on mobile.
- Use .img-thumbnail for gallery thumbnails.