Galleries

What is an image gallery?

An image gallery arranges a collection of photos or visuals so users can browse them and open larger versions. Common patterns include uniform grids, masonry layouts with mixed heights, justified rows, filterable galleries and thumbnail strips with a main image. Many galleries include a lightbox that shows the selected image full screen with next and previous navigation. Galleries are used on portfolios, photography sites, product pages, real estate listings and event pages.

When to use a gallery

Use a gallery when images are the content itself and users want to see many of them. For a few hero images, a carousel or single image may be enough.

Best practices

• Give every image descriptive alt text that explains what is shown, not just "image 1".
• Use <figure> and <figcaption> when images need captions.
• Serve thumbnails at thumbnail size and load full-size images only in the lightbox; use srcset, loading="lazy" and modern formats such as WebP or AVIF.
• Reserve space with aspect-ratio or width and height attributes to prevent layout shift.
• Thumbnails that open a lightbox should be buttons or links, reachable with the keyboard.
• A lightbox must trap focus while open, close with Escape, return focus to the thumbnail when closed and have labelled close and navigation buttons.
• For masonry layouts, check that the reading order still makes sense.

Bootstrap, Tailwind CSS and pure CSS versions

The gallery examples are available for Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS. Bootstrap versions use the grid and image utilities, with lightboxes built on the modal component; in Bootstrap 6 the modal is based on the native <dialog> element and colours come from the theme-* roles. Tailwind CSS versions use utilities with a small script for lightboxes, and pure CSS versions use CSS Grid or multi-column layouts for masonry. Filter by framework, test the gallery in the live preview, then copy or download the code and swap in your own images.