Gallery

React Bootstrap 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.

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



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