Gallery
React Gallery - free examples, templates & tutorial
Responsive React galleries created with Bootstrap 5. Image gallery, video gallery, photo gallery, full-page, eCommerce, lightbox, slider, thumbnails, & more.
Static images
An example with the usage of static images.
To learn more read Images Docs.
.webp)
.webp)
import React from 'react';
import {
MDBContainer,
MDBCol,
MDBRow,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBRow>
<MDBCol lg={4} md={12} className='mb-4 mb-lg-0'>
<img
src='https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp'
className='w-100 shadow-1-strong rounded mb-4'
alt='Boat on Calm Water'
/>
<img
src='https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain1.webp'
className='w-100 shadow-1-strong rounded mb-4'
alt='Wintry Mountain Landscape'
/>
</MDBCol>
<MDBCol lg={4} className='mb-4 mb-lg-0'>
<img
src='https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain2.webp'
className='w-100 shadow-1-strong rounded mb-4'
alt='Mountains in the Clouds'
/>
<img
src='https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp'
className='w-100 shadow-1-strong rounded mb-4'
alt='Boat on Calm Water'
/>
</MDBCol>
<MDBCol lg={4} className='mb-4 mb-lg-0'>
<img
src='https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(18).webp'
className='w-100 shadow-1-strong rounded mb-4'
alt='Waves at Sea'
/>
<img
src='https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp'
className='w-100 shadow-1-strong rounded mb-4'
alt='Yosemite National Park'
/>
</MDBCol>
</MDBRow>
);
}
Carousel / Slider
Carousel (also called "slider") is a slideshow cycling through different elements such as photos, videos, or text.
To learn more read Carousel Docs.
.webp)
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
.webp)
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.webp)
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
import React from 'react';
import {
MDBCarousel,
MDBCarouselInner,
MDBCarouselItem,
MDBCarouselElement,
MDBCarouselCaption
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBCarousel showIndicators showControls fade>
<MDBCarouselInner>
<MDBCarouselItem className='active'>
<MDBCarouselElement src='https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp' alt='...' />
<MDBCarouselCaption>
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</MDBCarouselCaption>
</MDBCarouselItem>
<MDBCarouselItem>
<MDBCarouselElement src='https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp' alt='...' />
<MDBCarouselCaption>
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</MDBCarouselCaption>
</MDBCarouselItem>
<MDBCarouselItem>
<MDBCarouselElement src='https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp' alt='...' />
<MDBCarouselCaption>
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</MDBCarouselCaption>
</MDBCarouselItem>
</MDBCarouselInner>
</MDBCarousel>
);
}
Gallery with modals and YouTube videos
An example of the combination of bootstrap modals and youtube video embeds.
To learn more read Modals Docs.
import React, { useState } from 'react';
import {
MDBContainer,
MDBCol,
MDBRow,
MDBModal,
MDBModalBody,
MDBModalFooter,
MDBBtn,
MDBModalDialog,
MDBModalContent,
} from 'mdb-react-ui-kit';
export default function App() {
const [modal1, setModal1] = useState(false);
const [modal2, setModal2] = useState(false);
const [modal3, setModal3] = useState(false);
return (
<>
<MDBRow>
<MDBCol lg={4} md={12} className='mb-4 mb-lg-0'>
<div className='bg-image hover-overlay ripple shadow-1-strong rounded'>
<img src='https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-1.webp' className='w-100' />
<a style={{ cursor: 'pointer' }} onClick={() => setModal1(true)}>
<div className='mask' style={{ backgroundColor: 'rgba(251, 251, 251, 0.2)' }}></div>
</a>
</div>
</MDBCol>
<MDBCol lg={4} md={12} className='mb-4 mb-lg-0'>
<div className='bg-image hover-overlay ripple shadow-1-strong rounded'>
<img src='https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-2.webp' className='w-100' />
<a style={{ cursor: 'pointer' }} onClick={() => setModal2(true)}>
<div className='mask' style={{ backgroundColor: 'rgba(251, 251, 251, 0.2)' }}></div>
</a>
</div>
</MDBCol>
<MDBCol lg={4} md={12} className='mb-4 mb-lg-0'>
<div className='bg-image hover-overlay ripple shadow-1-strong rounded'>
<img src='https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-3.webp' className='w-100' />
<a style={{ cursor: 'pointer' }} onClick={() => setModal3(true)}>
<div className='mask' style={{ backgroundColor: 'rgba(251, 251, 251, 0.2)' }}></div>
</a>
</div>
</MDBCol>
</MDBRow>
<MDBModal show={modal1} setShow={setModal1}>
<MDBModalDialog>
<MDBModalContent>
<MDBModalBody>
<div className='ratio ratio-16x9'>
<iframe
src='https://www.youtube.com/embed/A3PDXmYoF5U'
title='YouTube video'
allowFullScreen
></iframe>
</div>
</MDBModalBody>
<MDBModalFooter>
<MDBBtn onClick={() => setModal1(false)} color='secondary'>
Close
</MDBBtn>
</MDBModalFooter>
</MDBModalContent>
</MDBModalDialog>
</MDBModal>
<MDBModal show={modal2} setShow={setModal2}>
<MDBModalDialog>
<MDBModalContent>
<MDBModalBody>
<div className='ratio ratio-16x9'>
<iframe
src='https://www.youtube.com/embed/wTcNtgA6gHs'
title='YouTube video'
allowFullScreen
></iframe>
</div>
</MDBModalBody>
<MDBModalFooter>
<MDBBtn onClick={() => setModal2(false)} color='secondary'>
Close
</MDBBtn>
</MDBModalFooter>
</MDBModalContent>
</MDBModalDialog>
</MDBModal>
<MDBModal show={modal3} setShow={setModal3}>
<MDBModalDialog>
<MDBModalContent>
<MDBModalBody>
<div className='ratio ratio-16x9'>
<iframe
src='https://www.youtube.com/embed/vlDzYIIOYmM'
title='YouTube video'
allowFullScreen
></iframe>
</div>
</MDBModalBody>
<MDBModalFooter>
<MDBBtn onClick={() => setModal3(false)} color='secondary'>
Close
</MDBBtn>
</MDBModalFooter>
</MDBModalContent>
</MDBModalDialog>
</MDBModal>
</>
);
}
Lightbox
If you need advanced options you can use MDBootstrap LightBox component.
Note: This component requires MDBootstrap Pro package.
import React from 'react';
import {
MDBContainer,
MDBCol,
MDBLightbox,
MDBLightboxItem,
MDBRow,
} from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBLightbox>
<MDBRow>
<MDBCol lg='6'>
<MDBLightboxItem
src='https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp'
fullscreenSrc='https://mdbootstrap.com/img/Photos/Slides/1.webp'
className='w-100 mb-2 mb-md-4'
/>
<MDBLightboxItem
src='https://mdbootstrap.com/img/Photos/Thumbnails/Square/1.webp'
fullscreenSrc='https://mdbootstrap.com/img/Photos/Square/1.webp'
className='w-100'
/>
</MDBCol>
<MDBCol lg='6'>
<MDBLightboxItem
src='https://mdbootstrap.com/img/Photos/Thumbnails/Vertical/1.webp'
fullscreenSrc='https://mdbootstrap.com/img/Photos/Vertical/1.webp'
className='w-100'
/>
</MDBCol>
</MDBRow>
</MDBLightbox>
);
}
Advanced multi-item carousel
If you need advanced multi-item gallery you can use MDBootstrap Multi Item component.
Note: This component requires MDBootstrap Pro package.
import React from 'react';
import { MDBLightbox } from 'mdb-react-ui-kit';
import { MDBMultiCarousel, MDBMultiCarouselItem } from 'mdb-react-multi-carousel';
export default function App() {
return (
<MDBLightbox>
<MDBMultiCarousel lightbox>
<MDBMultiCarouselItem
src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp'
fullscreenSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp'
alt='Table Full of Spices'
/>
<MDBMultiCarouselItem
src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp'
fullscreenSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp'
alt='Winter Landscape'
/>
<MDBMultiCarouselItem
src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp'
fullscreenSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp'
alt='View of the City in the Mountains'
/>
<MDBMultiCarouselItem
src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp'
fullscreenSrc='https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp'
alt='Place Royale Bruxelles'
/>
</MDBMultiCarousel>
</MDBLightbox>
);
}
Vertical multi item carousel
Vertical implementation of Multi Item carousel.
Note: This component requires MDBootstrap Pro package.
import React from 'react';
import { MDBMultiCarousel, MDBMultiCarouselItem } from 'mdb-react-multi-carousel';
export default function App() {
return (
<MDBMultiCarousel vertical>
<MDBMultiCarouselItem
src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp'
alt='Table Full of Spices'
/>
<MDBMultiCarouselItem
src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp'
alt='Winter Landscape'
/>
<MDBMultiCarouselItem
src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp'
alt='View of the City in the Mountains'
/>
<MDBMultiCarouselItem
src='https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp'
alt='Place Royale Bruxelles'
/>
</MDBMultiCarousel>
);
}