React Bootstrap Gallery
React Gallery - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
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).webp',
cols: 1,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).webp',
cols: 2,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(71).webp',
cols: 1,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).webp',
cols: 2,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).webp',
cols: 2,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(78).webp',
cols: 1,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(77).webp',
cols: 2,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(79).webp',
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).webp',
cols: 1,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).webp',
cols: 2,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(71).webp',
cols: 1,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).webp',
cols: 2,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).webp',
cols: 2,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(78).webp',
cols: 1,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(77).webp',
cols: 2,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(79).webp',
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).webp',
cols: 1,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).webp',
cols: 2,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(71).webp',
cols: 1,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).webp',
cols: 2,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).webp',
cols: 2,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(78).webp',
cols: 1,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(77).webp',
cols: 2,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(79).webp',
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).webp',
cols: 1,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).webp',
cols: 2,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(71).webp',
cols: 1,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).webp',
cols: 2,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).webp',
cols: 2,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(78).webp',
cols: 1,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(77).webp',
cols: 2,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(79).webp',
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).webp',
cols: 1,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).webp',
cols: 2,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(71).webp',
cols: 1,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).webp',
cols: 2,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).webp',
cols: 2,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(78).webp',
cols: 1,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(77).webp',
cols: 2,
title: 'image',
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(79).webp',
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).webp',
cols: 1,
title: 'image',
pattern: 1
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).webp',
cols: 2,
title: 'image',
pattern: 2
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(71).webp',
cols: 1,
title: 'image',
pattern: 3
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).webp',
cols: 2,
title: 'image',
pattern: 4
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).webp',
cols: 2,
title: 'image',
pattern: 5,
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(78).webp',
cols: 1,
title: 'image',
pattern: 6
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(77).webp',
cols: 2,
title: 'image',
pattern: 7
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(79).webp',
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).webp',
cols: 1,
title: 'image',
overlay: 'blue-strong'
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(72).webp',
cols: 2,
title: 'image',
overlay: 'blue-light'
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(71).webp',
cols: 1,
title: 'image',
overlay: 'blue-slight'
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(74).webp',
cols: 2,
title: 'image',
overlay: 'lime-strong'
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(75).webp',
cols: 2,
title: 'image',
overlay: 'lime-light'
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(78).webp',
cols: 1,
title: 'image',
overlay: 'lime-slight'
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(77).webp',
cols: 2,
title: 'image',
overlay: 'teal-strong'
},
{
img:
'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(79).webp',
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";
Gallery - Properties
Name
Type
Default
Description
Example
cellHeightnumber
180Height of cell.
<MDBGallery cellHeight={180} />
childrenstring
React Children generate in gallery.
<MDBGallery >{children}</MDBGallery>
classNamestring
Custom class to gallery
<MDBGallery className="custom" />
colsstring
2Number of columns
<MDBGallery cols={2} />
tagstring
ulSet default tag to gallery
<MDBGallery tag='ul' />
spacingnumber
4Set spacing beetween elements in gallery
<MDBGallery spacing={4} />
styleobject
Set custom styles to gallery
<MDBGallery style={{width: 100}} />
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
cellHeight |
number | 180 |
Height of cell. | <MDBGallery cellHeight={180} /> |
children |
string | |
React Children generate in gallery. | <MDBGallery >{children}</MDBGallery> |
className |
string | |
Custom class to gallery | <MDBGallery className="custom" /> |
cols |
string | 2 |
Number of columns | <MDBGallery cols={2} /> |
tag |
string | ul |
Set default tag to gallery | <MDBGallery tag='ul' /> |
spacing |
number | 4 |
Set spacing beetween elements in gallery | <MDBGallery spacing={4} /> |
style |
object | |
Set custom styles to gallery | <MDBGallery style={{width: 100}} /> |
GalleryList - Properties
Name
Type
Default
Description
Example
childrenstring
React Children generate in gallery.
<MDBGalleryList >{children}</MDBGallery>
classNamestring
Custom class to gallerylist
<MDBGalleryList className="custom" />
colsstring
2Number of columns
<MDBGalleryList cols={2} />
tagstring
ulSet default tag to gallerylist
<MDBGalleryList tag='ul' />
rowsnumber
Set rows in gallerylist
<MDBGalleryList spacing={4} />
stylesobject
Set custom styles to gallerylist
<MDBGalleryList styles={{width: 100}} />
titleClassesstring
Set custom classes title in gallerylist
<MDBGalleryList titleClasses="custom" />
elementClassesstring
Set custom classes to element in gallerylist
<MDBGalleryList elementClasses="custom" />
| 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" /> |