Bootstrap 5Content

Bootstrap 5 Image Thumbnail

Bootstrap 5's Image Thumbnail component applies a rounded border, padding, and background to an image using the `.img-thumbnail` class, giving it a framed, polaroid-style appearance. It's designed for situations where you want images to stand out as distinct visual objects rather than blending into the surrounding layout. Use it in galleries, product listings, profile cards, or anywhere a subtle visual boundary between the image and its container improves clarity.

Primary Class

.image-thumbnail

Common Use Cases

→Product image galleries on e-commerce pages where each photo needs a clean, consistent frame to separate it from the white background
→Team member profile grids where headshots require a polished border treatment without custom CSS per image
→Portfolio lightbox previews where thumbnail images link to full-size versions and need a clear clickable boundary
→Blog post image carousels where multiple images sit side-by-side and need visual separation without heavy card components

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="/img/product-chair.jpg" alt="Walnut Dining Chair" class="img-thumbnail" width="300" height="300">
  </div>
  <div class="col-6 col-md-4">
    <img src="/img/product-table.jpg" alt="Oak Coffee Table" class="img-thumbnail" width="300" height="300">
  </div>
  <div class="col-6 col-md-4">
    <img src="/img/product-lamp.jpg" alt="Brass Floor Lamp" 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

Stack with img-fluid for responsive thumbnails

Add `.img-fluid` alongside `.img-thumbnail` so the image scales with its column width while retaining the border treatment — without it, fixed-width images will overflow on small screens.

Override the border colour via CSS custom properties

Bootstrap 5 uses `--bs-thumbnail-border-color` as the border variable, so you can scope overrides to a specific container with `style="--bs-thumbnail-border-color: #c8a96e;"` rather than writing a global CSS rule.

Wrap thumbnails in anchor tags for gallery behaviour

Place `<a href="/full-size.jpg" data-bs-toggle="modal">` around the `<img class="img-thumbnail">` to make the entire framed image clickable, which is cleaner than adding a separate button below.

Avoid applying img-thumbnail to SVG icons

The 4px padding and border look fine on photographs but create awkward whitespace around small SVG icons or logos — use a plain `.border.rounded` combination instead for non-photographic images.

FAQ

What exactly does the .img-thumbnail class add — is it just a border?

It adds more than a border. The class sets `padding: 0.25rem`, a `1px solid` border using Bootstrap's border colour token, `border-radius` matching `--bs-border-radius`, a white background (`background-color: #fff`), and `max-width: 100%` for basic responsiveness. This combination is what gives it the classic framed-photo look without any custom CSS.

How do I customise the thumbnail border radius or padding in Bootstrap 5?

The cleanest approach in Bootstrap 5 is to override the relevant Sass variables before compiling: `$thumbnail-padding`, `$thumbnail-border-radius`, and `$thumbnail-border-color`. If you're not compiling Sass, you can use inline CSS custom properties — for example `style="--bs-border-radius: 0;"` on the image or its container to square off corners — though this only works for properties Bootstrap has exposed as custom properties.

How does Canvas Builder handle Image Thumbnail components?

When you describe an image gallery or product grid in Canvas Builder, it automatically applies `.img-thumbnail` to images where a bordered, framed treatment is appropriate based on context. It wires in your brand's border colour via the Canvas HTML template's token system so the thumbnail borders match your palette from the first render, and wraps everything in a responsive grid so thumbnails reflow correctly across breakpoints without any manual adjustment.