Bootstrap 5Content

Bootstrap 5 Image Thumbnail

Bootstrap 5's Image Thumbnail component adds a rounded border and padding around an image using the `.img-thumbnail` class, giving it a framed, polished appearance suitable for galleries and media grids. It renders responsively by default — the image scales within its container without overflowing. Use it when you need a consistent, bordered presentation for images rather than raw edge-to-edge display.

Primary Class

.image-thumbnail

Common Use Cases

→Product image grids on e-commerce pages where each item photo needs a clean bordered frame to visually separate it from the background
→Team member profile photos displayed in a card grid, where the thumbnail border creates a consistent, structured portrait layout
→Portfolio or photography gallery pages where multiple images are arranged in a masonry or CSS Grid layout and uniform framing reinforces the design
→Blog post image previews in an archive listing, where thumbnails sit alongside post metadata and need a subtle visual boundary to anchor them

Variants & Classes

Variant	Description	Classes
Image Thumbnail Default	Standard image thumbnail with Bootstrap's default styling.	`image-thumbnail`
Image Thumbnail Responsive	Responsive variant that adapts to different screen sizes.	`image-thumbnail image-thumbnail-responsive`

Code Example

<div class="row g-3">
  <div class="col-6 col-md-4">
    <img src="/images/product-running-shoe.jpg" alt="Running shoe — Trail Pro X" class="img-thumbnail" width="300" height="300">
  </div>
  <div class="col-6 col-md-4">
    <img src="/images/product-trail-boot.jpg" alt="Trail boot — Summit Series" class="img-thumbnail" width="300" height="300">
  </div>
  <div class="col-6 col-md-4">
    <img src="/images/product-sandal.jpg" alt="Sandal — Coastal Drift" class="img-thumbnail" width="300" height="300">
  </div>
</div>

Live Examples

Basic Image Thumbnail

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated image thumbnail with custom colours
✓Image Thumbnail with interactive states
✓Responsive image thumbnail for all screen sizes

Best Practices

Set explicit width and height attributes

Always add `width` and `height` attributes to your `<img>` tags when using `.img-thumbnail` — this prevents cumulative layout shift (CLS) as the page loads and improves your Core Web Vitals score.

Combine with anchor tags for lightbox or navigation

Wrap the `<img class="img-thumbnail">` inside an `<a>` tag to make the framed image clickable — either linking to a full-size version or triggering a Bootstrap modal lightbox without any extra markup overhead.

Override the border colour with a CSS custom property

Bootstrap 5 uses `--bs-thumbnail-border-color` (mapped to `--bs-border-color` by default) — you can scope a custom border colour to just your gallery section with `.my-gallery img { --bs-thumbnail-border-color: #your-brand-hex; }` without touching global variables.

Pair with `object-fit: cover` for consistent aspect ratios

If your source images vary in size, add `style="object-fit: cover;"` along with fixed `width` and `height` values to ensure every thumbnail crops uniformly rather than distorting or leaving whitespace inside the border.

FAQ

Does `.img-thumbnail` automatically make the image responsive?

Yes — Bootstrap's `.img-thumbnail` includes `max-width: 100%` and `height: auto`, which means the image will shrink to fit its parent container on smaller screens without overflowing. However, it does not upscale images beyond their natural dimensions, so always use source images at least as large as their intended display size to avoid pixelation.

How do I change the border radius or padding on an image thumbnail?

Bootstrap 5 exposes Sass variables `$thumbnail-padding`, `$thumbnail-border-radius`, and `$thumbnail-border-width` that you can override before importing Bootstrap in your custom Sass build. If you're working with plain CSS, target the rendered `.img-thumbnail` class directly: `.img-thumbnail { border-radius: 0; padding: 0.5rem; }` — note that specificity should be sufficient without `!important` since Bootstrap doesn't use it on these properties.

How does Canvas Builder handle Image Thumbnail components?

When you describe a gallery or image grid in Canvas Builder, it generates semantically correct `<img class="img-thumbnail">` elements inside a responsive Bootstrap 5 grid with appropriate `col-*` breakpoint classes. It automatically infers `alt` text from your content description and applies your project's brand border colour via scoped CSS custom properties, so the thumbnails integrate with your palette without overriding global Bootstrap styles.