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.

Show code

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.

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Show code

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.

Show code

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.

Show code

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.

Show code

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.

Show code

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>
  );
}

Gallery

React Gallery - free examples, templates & tutorial

Static images

Carousel / Slider

First slide label

Second slide label

Third slide label

Gallery with modals and YouTube videos

Lightbox

Advanced multi-item carousel

Vertical multi item carousel

Related resources