Lightbox

React Bootstrap 5 Lightbox component

Responsive lightbox built with the latest Bootstrap 5. Lightbox is a responsive gallery with the option to enlarge selected photos.

MDB lightbox is a group of images combined in one responsive gallery. Elements are grouped in a thumbnail grid, which can be displayed as a slideshow.

Note: Read the API tab to find all available options and advanced customization

Basic example

A basic example of a lightbox with the most common use case with the bootstrap grid.

Lightbox image 1
Lightbox image 2
Lightbox image 3
Show code

Image optimization

To ensure the proper performance of the page, it is recommended to include thumbnails of images in the src attribute. Then in the fullscreenSrc property add the path to the image with higher resolution. If the fullscreenSrc property is omitted, the lightbox will display the same image as in the reduced size.

Show code

Shadows and rounded corners

You can improve the look of the images by adding shadows and rounded corners.

Lightbox image 1
Lightbox image 2
Lightbox image 3
Show code

Different sizes

Loaded images can have any aspect ratio. Their size will be automatically adjusted to the window when you open the lightbox.

Lightbox image 1 Lightbox image 2
Lightbox image 3
Show code

Zoom level

The zoomLevel property allows you to define the size of a single zoom in / zoom out.

Lightbox image 1
Lightbox image 2
Lightbox image 3
Show code

Disabled image

By adding a disabled property to any MDBLightboxItem, you can exclude it from your lightbox. In the example below, the third image has been disabled.

Lightbox image 1
Lightbox image 2
Disabled image
Lightbox image 3
Show code

Captions

Image captions can be added using the caption property. If it is not set, the data is taken from the alt property. When you want to disable caption, leave the caption empty.

Table Full of Spices
Winter Landscape
View of the City in the Mountains
Show code

Outside access

Show code