Bootstrap 5 image galleries display collections of images in responsive grid layouts. This page covers 4 gallery patterns — grid, hover overlay, featured and filtered — each ready to use in portfolios and product pages.

Quick Setup

Galleries need only Bootstrap 5 CSS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

Key Classes Reference

ClassWhat It Does
.img-fluidMakes images responsive
.row.g-3Grid with gap between images
.col-6.col-md-42 cols mobile, 3 cols desktop
.object-fit-coverFills container without distortion
.roundedRounded image corners
.position-relativeEnables overlay positioning
.position-absolutePositions overlay over image

1. Bootstrap 5 Grid Image Gallery

A responsive 3-column image grid using Bootstrap's grid system. 1 column on mobile, 2 on tablet, 3 on desktop.

2. Bootstrap 5 Gallery with Hover Overlay

Image grid where hovering reveals an overlay with caption and view button.

4. Bootstrap 5 Filtered Image Gallery

Gallery with category filter buttons. Click to show only images from that category.

Frequently Asked Questions

Use Bootstrap's grid with col-6 col-md-4 for a 2-column mobile, 3-column desktop gallery. Add img-fluid to all images for responsive sizing. Use g-3 on the row for consistent gutters. Images automatically resize to fit their column width.
Bootstrap 5 doesn't include a lightbox. Use GLightbox or Fancybox which both work well with Bootstrap. Add data-lightbox attribute to gallery links and initialize: const lightbox = GLightbox({ selector: '[data-lightbox]' }). Both libraries are lightweight and mobile-friendly.
Wrap images in an overflow:hidden div and add a CSS transition: .gallery-item { overflow:hidden; } .gallery-item img { transition: transform 0.3s ease; } .gallery-item:hover img { transform: scale(1.1); }. The overflow:hidden hides the scaled image outside its container.
Use object-fit:cover with a fixed height on all images: img { height: 220px; object-fit: cover; width: 100%; }. This crops images to fill the space without distortion. Add border-radius for rounded corners. Works perfectly with Bootstrap's grid columns.
Add data-cat attributes to gallery items and filter buttons. On button click, loop through items and toggle display:none based on whether the item's data-cat matches the selected filter. Add a transition for smooth hiding/showing. Show 'all' items when the All button is clicked.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →

Use code FIRST30 for 30% off your first purchase.

Related Components

bootstrap-5-carousel-example

View examples →

Bootstrap 5 Card Example

View examples →

Bootstrap 5 Grid System Example

View examples →