Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Image Thumbnails in Bootstrap 5
Image Thumbnails: Learn how to create and style image thumbnails for galleries, previews, and product listings.
What are Image Thumbnails?
Image thumbnails are smaller versions of images used for previews in galleries, product listings, and content grids. Bootstrap provides the .img-thumbnail class to create attractive, consistent thumbnails.
Regular Image
Standard image with .rounded
Image Thumbnail
With .img-thumbnail class
The .img-thumbnail Class
How .img-thumbnail Works
The .img-thumbnail class adds these styles:
.img-thumbnail {
padding: 0.25rem;
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: 0.375rem;
max-width: 100%;
height: auto;
}Key Features:
- Padding: 0.25rem white space around image
- Background: White background color
- Border: Light gray border (1px)
- Border Radius: Slightly rounded corners
- Responsive: Includes max-width: 100%
Use Cases:
- Image galleries
- Product previews
- User avatars
- Content thumbnails
- Media libraries
- File previews
Basic Thumbnail Examples
Square Thumbnail
1:1 Aspect Ratio
Landscape Thumbnail
4:3 Aspect Ratio
Portrait Thumbnail
3:4 Aspect Ratio
<!-- Square thumbnail -->
<Image width={200} height={150}
src="square.jpg"
alt="Square image"
class="img-thumbnail"
width="150"
height="150"
/>
<!-- Landscape thumbnail -->
<Image width={200} height={150}
src="landscape.jpg"
alt="Landscape image"
class="img-thumbnail"
width="200"
height="150"
/>
<!-- Portrait thumbnail -->
<Image width={200} height={150}
src="portrait.jpg"
alt="Portrait image"
class="img-thumbnail"
width="150"
height="200"
/>Thumbnail Sizing Options
Different Thumbnail Sizes
Extra Small
80x80 pixels
Small
120x120 pixels
Medium
200x200 pixels
Large
300x300 pixels
Size Recommendations:
- XS (80px): User avatars in comments
- Small (120px): Gallery grid items
- Medium (200px): Product thumbnails
- Large (300px): Featured images
Thumbnail Gallery Grids
Responsive Thumbnail Grids
Thumbnail 1
Description of thumbnail 1
Thumbnail 2
Description of thumbnail 2
Thumbnail 3
Description of thumbnail 3
Thumbnail 4
Description of thumbnail 4
Thumbnail 5
Description of thumbnail 5
Thumbnail 6
Description of thumbnail 6
Thumbnail 7
Description of thumbnail 7
Thumbnail 8
Description of thumbnail 8
Thumbnail 9
Description of thumbnail 9
<!-- Thumbnail Gallery Grid -->
<div class="row g-3">
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-6">
<div class="card">
<Image width={200} height={150}
src="image.jpg"
class="card-img-top img-thumbnail"
alt="Gallery thumbnail"
/>
<div class="card-body text-center">
<h6 class="card-title">Title</h6>
<p class="card-text small">Description</p>
</div>
</div>
</div>
<!-- Repeat for other thumbnails -->
</div>Thumbnail with Overlay Effects
Interactive Thumbnails
<!-- Thumbnail with badges -->
<div class="position-relative">
<Image width={200} height={150}
src="image.jpg"
class="img-thumbnail"
alt="Thumbnail"
/>
<span class="badge bg-primary position-absolute top-0 start-0 m-2">
New
</span>
<button class="btn btn-sm btn-light position-absolute top-0 end-0 m-2">
♡
</button>
</div>
<!-- Clickable thumbnail with overlay -->
<a href="#" class="text-decoration-none">
<div class="position-relative">
<Image width={200} height={150}
src="image.jpg"
class="img-thumbnail"
alt="Clickable"
/>
<div class="position-absolute bottom-0 start-0 end-0 p-3 text-white bg-dark bg-opacity-75">
<h6 class="mb-0">Click to View</h6>
</div>
</div>
</a>
<!-- Custom border thumbnail -->
<div class="img-thumbnail border-primary">
<Image width={200} height={150}
src="image.jpg"
class="img-fluid rounded"
alt="Custom border"
/>
<div class="text-center mt-2">
<span class="badge bg-danger">Featured</span>
</div>
</div>Circular Thumbnails
Basic Circle
Colored Border
With Background
With Status Indicator
<!-- Basic circular thumbnail -->
<Image width={200} height={150}
src="avatar.jpg"
class="img-thumbnail rounded-circle"
alt="User avatar"
width="100"
height="100"
/>
<!-- Circular with colored border -->
<Image width={200} height={150}
src="avatar.jpg"
class="img-thumbnail rounded-circle border-primary border-3"
alt="User avatar"
/>
<!-- Circular with status indicator -->
<div class="position-relative d-inline-block">
<Image width={200} height={150}
src="avatar.jpg"
class="img-thumbnail rounded-circle"
alt="User avatar"
/>
<span class="position-absolute bottom-0 end-0 translate-middle p-1 bg-success border border-white rounded-circle">
<span class="visually-hidden">Online</span>
</span>
</div>Thumbnail Carousel/Slider
Product Thumbnail Slider
Thumbnail Navigation
Click thumbnails to change main image
<!-- Product thumbnail slider -->
<div class="row">
<!-- Main image -->
<div class="col-md-8">
<div class="border rounded p-3">
<Image width={200} height={150}
src="main-image.jpg"
class="img-fluid rounded"
alt="Main product image"
/>
</div>
</div>
<!-- Thumbnail navigation -->
<div class="col-md-4">
<div class="row g-2">
<div class="col-6">
<div class="img-thumbnail border-primary border-2">
<Image width={200} height={150}
src="thumb1.jpg"
class="img-fluid rounded"
alt="Thumbnail 1"
/>
</div>
</div>
<!-- More thumbnails -->
</div>
</div>
</div>Thumbnail Customization
Custom Thumbnail Styles
Shadow effect
Colored thick border
Extra padding
Pill container
Dark theme
Dark background
+
Add Image
Upload placeholder
<!-- Custom thumbnail styles -->
<!-- Shadow effect -->
<div class="img-thumbnail border-0 shadow">
<Image width={200} height={150} src="image.jpg" class="img-fluid rounded" alt="Shadow">
</div>
<!-- Colored thick border -->
<div class="img-thumbnail border-success border-3">
<Image width={200} height={150} src="image.jpg" class="img-fluid rounded" alt="Colored border">
</div>
<!-- Dark theme -->
<div class="img-thumbnail bg-dark text-white">
<Image width={200} height={150} src="image.jpg" class="img-fluid rounded" alt="Dark">
<div class="text-center mt-2">
<small>Dark theme</small>
</div>
</div>
<!-- Upload placeholder -->
<div class="img-thumbnail border-dashed border-2">
<div class="text-center py-4">
<span class="display-6">+</span>
<p class="mb-0">Add Image</p>
</div>
</div>Best Practices for Thumbnails
Thumbnail Best Practices
- Consistent sizing: Use consistent dimensions for grid layouts
- Optimize images: Thumbnails should be small file sizes
- Clear alt text: Describe what the thumbnail shows
- Responsive design: Ensure thumbnails work on all devices
- Visual hierarchy: Use borders or shadows to indicate selection
- Loading strategy: Consider lazy loading for large galleries
- Accessibility: Ensure proper contrast and keyboard navigation
Common Issues and Solutions
| Issue | Cause | Solution |
|---|---|---|
| Thumbnails not aligned | Different image heights | Use fixed height or object-fit: cover |
| Poor quality thumbnails | Scaling large images down | Create properly sized thumbnails server-side |
| Slow loading gallery | Too many large thumbnails | Implement lazy loading and pagination |
| Inconsistent borders | Different border classes | Create consistent CSS classes |
| Click area too small | Small thumbnails with no padding | Add padding or make entire card clickable |
