Bootstrap Images

Bootstrap Images Overview

The .img-fluid class applies max-width: 100% and height: auto so images scale down within their parent container instead of overflowing on small screens. This single class solves most responsive image problems without media queries.

Beyond responsiveness, Bootstrap provides shape utilities like rounded, rounded-circle, and img-thumbnail for bordered previews, along with shadow utilities and standard alignment helpers for positioning images inside text or layouts.

Bootstrap Images Example

<img src="hero.jpg" class="img-fluid rounded shadow-sm" alt="Responsive hero image">

<img src="avatar.jpg" class="rounded-circle" width="64" height="64" alt="User avatar">

<img src="preview.jpg" class="img-thumbnail" alt="Thumbnail preview">

The first image scales responsively, gains rounded corners, and a subtle shadow for depth. The avatar example uses rounded-circle with explicit width and height for a consistent circular profile image. The thumbnail example adds a bordered, padded frame commonly used in galleries.

Top 10 Bootstrap Images Examples

These are the image utility patterns you'll use most often for responsive, styled images.

Popular Real-World Bootstrap Images Examples

These image patterns show up constantly in profiles, galleries, articles, and marketing pages.

Best Practices

• Always add .img-fluid to images inside flexible layouts so they never overflow their container.
• Provide meaningful alt text for accessibility, never leaving it empty unless the image is purely decorative.
• Use explicit width and height attributes alongside responsive classes to reduce layout shift while loading.
• Prefer object-fit-cover with a fixed height for consistent card image cropping instead of stretching images.
• Use rounded-circle only with square source images, or the crop will look distorted.
• Combine shadow utilities sparingly; too many shadowed images reduce visual hierarchy.
• Use the figure component when an image needs an associated caption for context.

Common Mistakes

• Forgetting .img-fluid, causing large images to overflow their container on mobile.
• Leaving alt attributes empty or filled with filenames instead of descriptive text.
• Applying rounded-circle to non-square images without cropping first, producing an oval instead of a circle.
• Not setting explicit dimensions, causing layout shift as images load.
• Stretching images with width and height percentages instead of using object-fit utilities.
• Overusing img-thumbnail borders on images that already have a card border, doubling the frame.

Key Takeaways

• .img-fluid is the single most useful class for responsive images in Bootstrap.
• Shape utilities like rounded and rounded-circle style image corners without custom CSS.
• img-thumbnail adds a bordered, padded frame ideal for galleries.
• object-fit-cover combined with a fixed height keeps card image grids visually consistent.
• The figure component pairs images with semantic captions.