Bootstrap 5Content

Bootstrap 5 Image Thumbnail

Q: 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.

Q: 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.

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.

Bootstrap class

.img-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 and classes

Variant	Description and classes	Classes
Thumbnail	Rounded 1px border with padding around the image.`img-thumbnail`	`img-thumbnail`
Circular thumbnail	Bordered round image for avatars.`img-thumbnail rounded-circle`	`img-thumbnail rounded-circle`
Thumbnail grid	Responsive grid of thumbnails.`row g-3 + col-6 col-md-4`	`row g-3 + col-6 col-md-4`
Responsive image	Scales with its column without the border.`img-fluid`	`img-fluid`

Code example

HTML

<div class="row g-3">
  <div class="col-6 col-md-4">
    <img src="https://picsum.photos/seed/cb-product-1/300/300" alt="Product photo: Trail Pro X" class="img-thumbnail" width="300" height="300">
  </div>
  <div class="col-6 col-md-4">
    <img src="https://picsum.photos/seed/cb-product-2/300/300" alt="Product photo: Summit Series" class="img-thumbnail" width="300" height="300">
  </div>
  <div class="col-6 col-md-4">
    <img src="https://picsum.photos/seed/cb-product-3/300/300" alt="Product photo: Coastal Drift" class="img-thumbnail" width="300" height="300">
  </div>
</div>

Live examples

Basic Image Thumbnail

Example 1

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

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.