web
mobile

React Bootstrap Gallery MDB Pro component

React Gallery - Bootstrap 4 & Material Design

Bootstrap gallery is a great UI element perfect for introducing vistors to a number of images, videos or other media files.

Examples of Bootstrap gallery use:

Most popular paintings on a museum website Landscape photos in traveling blog Best pieces of work in a portfolio All of the above can be easily created by following those examples:


Basic Example



      import React from 'react';
      import { MDBGallery, MDBGalleryList} from 'mdbreact';

      function Gallery() {
        const dataImg = [
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg',
            cols: 1,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).jpg',
            cols: 2,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(71).jpg',
            cols: 1,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).jpg',
            cols: 2,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg',
            cols: 2,
            title: 'image',
          },

          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(78).jpg',
            cols: 1,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(77).jpg',
            cols: 2,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(79).jpg',
            cols: 1,
            title: 'image',
          }
        ];

        return (
          <MDBGallery cols={4}>
            {dataImg.map(({ cols, img, title }, i) => {
              return (
                <MDBGalleryList key={i} cols={cols || 1}>
                  <img src={img} alt={title} />
                </MDBGalleryList>
              );
            })}
          </MDBGallery>
        );
      }

      export default Gallery;

    

Rounded with shadows



      import React from 'react';
      import { MDBGallery, MDBGalleryList} from 'mdbreact';

      function Gallery() {
        const dataImg = [
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg',
            cols: 1,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).jpg',
            cols: 2,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(71).jpg',
            cols: 1,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).jpg',
            cols: 2,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg',
            cols: 2,
            title: 'image',
          },

          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(78).jpg',
            cols: 1,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(77).jpg',
            cols: 2,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(79).jpg',
            cols: 1,
            title: 'image',
          }
        ];

        return (
          <MDBGallery cols={4}>
            {dataImg.map(({ cols, img, title }, i) => {
              return (
                <MDBGalleryList
                  key={i}
                  cols={cols || 1}
                  titleClasses='rounded'
                  styles={{ boxShadow: '0 0 3px rgba(0,0,0, .3)' }}
                >
                  <img src={img} alt={title} />
                </MDBGalleryList>
              );
            })}
          </MDBGallery>
        );
      }

      export default Gallery;

    

With perfect scrollbar styles



      import React from 'react';
      import { MDBGallery, MDBGalleryList} from 'mdbreact';

      function Gallery() {
        const dataImg = [
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg',
            cols: 1,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).jpg',
            cols: 2,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(71).jpg',
            cols: 1,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).jpg',
            cols: 2,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg',
            cols: 2,
            title: 'image',
          },

          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(78).jpg',
            cols: 1,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(77).jpg',
            cols: 2,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(79).jpg',
            cols: 1,
            title: 'image',
          }
        ];

        return (
        <MDBGallery
            className='scrollbar'
            cols={4}
            style={{ width: '500px', height: '400px' }}
          >
          {dataImg.map(({ cols, img, title }, i) => {
            return (
              <MDBGalleryList
                key={i}
                cols={cols || 1}
                titleClasses='rounded'
                styles={{ boxShadow: '0 0 3px rgba(0,0,0, .3)' }}
              >
                <img src={img} alt={title} />
              </MDBGalleryList>
            );
          })}
        </MDBGallery>
        );
      }

      export default Gallery;

    

      .scrollbar {
        overflow: scroll;
      }

      .scrollbar::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }

      .scrollbar::-webkit-scrollbar-thumb {
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background: rgba(0, 0, 0, 0.2);
      }

    

With spacing



      import React from 'react';
      import { MDBGallery, MDBGalleryList} from 'mdbreact';

      function Gallery() {
        const dataImg = [
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg',
            cols: 1,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).jpg',
            cols: 2,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(71).jpg',
            cols: 1,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).jpg',
            cols: 2,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg',
            cols: 2,
            title: 'image',
          },

          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(78).jpg',
            cols: 1,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(77).jpg',
            cols: 2,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(79).jpg',
            cols: 1,
            title: 'image',
          }
        ];

        return (
          <>
          <MDBGallery cols={4} spacing={0}>
            {dataImg.map(({ cols, img, title }, i) => {
              return (
                <MDBGalleryList key={i} cols={cols || 1}>
                  <img src={img} alt={title} />
                </MDBGalleryList>
              );
            })}
          </MDBGallery>
          <hr />
          <MDBGallery cols={4} spacing={30}>
            {dataImg.map(({ cols, img, title }, i) => {
              return (
                <MDBGalleryList key={i} cols={cols || 1}>
                  <img src={img} alt={title} />
                </MDBGalleryList>
              );
            })}
          </MDBGallery>
        </>
        );
      }

      export default Gallery;

    

With sizes



      import React from 'react';
      import { MDBGallery, MDBGalleryList} from 'mdbreact';

      function Gallery() {
        const dataImg = [
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg',
            cols: 1,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).jpg',
            cols: 2,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(71).jpg',
            cols: 1,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).jpg',
            cols: 2,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg',
            cols: 2,
            title: 'image',
          },

          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(78).jpg',
            cols: 1,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(77).jpg',
            cols: 2,
            title: 'image',
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(79).jpg',
            cols: 1,
            title: 'image',
          }
        ];

        return (
          <>
          <MDBGallery cols={3}>
            {dataImg.map(({ cols, img, title }, i) => {
              return (
                <MDBGalleryList key={i} cols={cols || 1}>
                  <img src={img} alt={title} />
                </MDBGalleryList>
              );
            })}
          </MDBGallery>

          <hr />

          <MDBGallery cols={3}>
            {dataImg.map(({ cols, img, title }, i) => {
              return (
                <MDBGalleryList key={i} cols={cols || 1} rows={2}>
                  <img src={img} alt={title} />
                </MDBGalleryList>
              );
            })}
          </MDBGallery>
        </>
        );
      }

      export default Gallery;

    

With masks



      import React from 'react';
      import { MDBGallery, MDBGalleryList , MDBMask, MDBBox } from 'mdbreact';

      function Gallery() {
        const dataImg = [
        {
          img:
            'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg',
          cols: 1,
          title: 'image',
          pattern: 1
        },
        {
          img:
            'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).jpg',
          cols: 2,
          title: 'image',
          pattern: 2
        },
        {
          img:
            'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(71).jpg',
          cols: 1,
          title: 'image',
          pattern: 3
        },
        {
          img:
            'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).jpg',
          cols: 2,
          title: 'image',
          pattern: 4
        },
        {
          img:
            'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg',
          cols: 2,
          title: 'image',
          pattern: 5,
        },

        {
          img:
            'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(78).jpg',
          cols: 1,
          title: 'image',
          pattern: 6
        },
        {
          img:
            'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(77).jpg',
          cols: 2,
          title: 'image',
          pattern: 7
        },
        {
          img:
            'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(79).jpg',
          cols: 1,
          title: 'image',
          pattern: 8
        }
      ];

        return (
          <MDBGallery cols={4}>
            {dataImg.map(({ cols, img, title, pattern }, i) => {
              return (
                <MDBGalleryList key={i} cols={cols || 1} rows={2} titleClasses='view'>
                  <img src={img} alt={title} />
                  <MDBMask pattern={pattern} className='flex-center'>
                    <MDBBox
                      tag='p'
                      color='white'
                      style={{
                        position: 'absolute',
                        top: '50%'
                      }}
                    >
                      With masks pattern {i + 1}
                    </MDBBox>
                  </MDBMask>
                </MDBGalleryList>
              );
            })}
          </MDBGallery>
        );
      }

      export default Gallery;

    

With hover



      import React from 'react';
      import { MDBGallery, MDBGalleryList , MDBMask, MDBBox } from 'mdbreact';

      function Gallery() {
        const dataImg = [
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg',
            cols: 1,
            title: 'image',
            overlay: 'blue-strong'
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).jpg',
            cols: 2,
            title: 'image',
            overlay: 'blue-light'
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(71).jpg',
            cols: 1,
            title: 'image',
            overlay: 'blue-slight'
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).jpg',
            cols: 2,
            title: 'image',
            overlay: 'lime-strong'
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).jpg',
            cols: 2,
            title: 'image',
            overlay: 'lime-light'
          },

          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(78).jpg',
            cols: 1,
            title: 'image',
            overlay: 'lime-slight'
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(77).jpg',
            cols: 2,
            title: 'image',
            overlay: 'teal-strong'
          },
          {
            img:
              'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(79).jpg',
            cols: 1,
            title: 'image',
            overlay: 'teal-light'
          }
        ];

        return (
          <MDBGallery cols={4}>
            {dataImg.map(({ cols, img, title, overlay }, i) => {
              return (
                <MDBGalleryList
                  key={i}
                  cols={cols || 1}
                  rows={2}
                  titleClasses='view overlay'
                >
                  <img src={img} alt={title} />
                  <MDBMask className='flex-center' overlay={overlay}>
                    <MDBBox
                      tag='p'
                      color='white'
                      style={{
                        position: 'absolute',
                        top: '50%'
                      }}
                    >
                      With {overlay}
                    </MDBBox>
                  </MDBMask>
                </MDBGalleryList>
              );
            })}
          </MDBGallery>
        );
      }

      export default Gallery;

    

React Gallery - API

In this section you will find advanced information about the Gallery component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Gallery import statement

There is a need to import few components to build Gallery window.


          import { MDBGallery, MDBGalleryList } from "mdbreact";
      

GalleryList - Properties

Name Type Default Description Example
children string React Children generate in gallery. <MDBGalleryList >{children}</MDBGallery>
className string Custom class to gallerylist <MDBGalleryList className="custom" />
cols string 2 Number of columns <MDBGalleryList cols={2} />
tag string ul Set default tag to gallerylist <MDBGalleryList tag='ul' />
rows number Set rows in gallerylist <MDBGalleryList spacing={4} />
styles object Set custom styles to gallerylist <MDBGalleryList styles={{width: 100}} />
titleClasses string Set custom classes title in gallerylist <MDBGalleryList titleClasses="custom" />
elementClasses string Set custom classes to element in gallerylist <MDBGalleryList elementClasses="custom" />