Gallery
Bootstrap Gallery - free examples, templates & tutorial
Responsive 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)
<!-- Gallery -->
<div class="row">
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(73).webp"
class="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"
class="w-100 shadow-1-strong rounded mb-4"
alt="Wintry Mountain Landscape"
/>
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain2.webp"
class="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"
class="w-100 shadow-1-strong rounded mb-4"
alt="Boat on Calm Water"
/>
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Nature/4-col/img%20(18).webp"
class="w-100 shadow-1-strong rounded mb-4"
alt="Waves at Sea"
/>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Vertical/mountain3.webp"
class="w-100 shadow-1-strong rounded mb-4"
alt="Yosemite National Park"
/>
</div>
</div>
<!-- Gallery -->
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.
<!-- Carousel wrapper -->
<div
id="carouselBasicExample"
data-mdb-carousel-init class="carousel slide carousel-fade"
data-mdb-ride="carousel"
>
<!-- Indicators -->
<div class="carousel-indicators">
<button data-mdb-button-init
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button data-mdb-button-init
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide-to="1"
aria-label="Slide 2"
></button>
<button data-mdb-button-init
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<!-- Inner -->
<div class="carousel-inner">
<!-- Single item -->
<div class="carousel-item active">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(15).webp"
class="d-block w-100"
alt="Sunset Over the City"
/>
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.
</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(22).webp"
class="d-block w-100"
alt="Canyon at Nigh"
/>
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/img%20(23).webp"
class="d-block w-100"
alt="Cliff Above a Stormy Sea"
/>
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
</p>
</div>
</div>
</div>
<!-- Inner -->
<!-- Controls -->
<button data-mdb-button-init
class="carousel-control-prev"
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button data-mdb-button-init
class="carousel-control-next"
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Carousel wrapper -->
Multi-item carousel
By using a combination of available classes you can create a carousel with multiple items on each slide.
If you need more advanced options and examples of multi-item carousel have a look at Multi-item Carousel Docs
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
<!-- Carousel wrapper -->
<div
id="carouselMultiItemExample"
data-mdb-carousel-init class="carousel slide carousel-dark text-center"
data-mdb-ride="carousel"
>
<!-- Controls -->
<div class="d-flex justify-content-center mb-4">
<button data-mdb-button-init
class="carousel-control-prev position-relative"
type="button"
data-mdb-target="#carouselMultiItemExample"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button data-mdb-button-init
class="carousel-control-next position-relative"
type="button"
data-mdb-target="#carouselMultiItemExample"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Inner -->
<div class="carousel-inner py-4">
<!-- Single item -->
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/181.webp"
class="card-img-top"
alt="Waterfall"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/182.webp"
class="card-img-top"
alt="Sunset Over the Sea"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/183.webp"
class="card-img-top"
alt="Sunset over the Sea"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/184.webp"
class="card-img-top"
alt="Fissure in Sandstone"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/185.webp"
class="card-img-top"
alt="Storm Clouds"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/186.webp"
class="card-img-top"
alt="Hot Air Balloons"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/187.webp"
class="card-img-top"
alt="Peaks Against the Starry Sky"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0 d-none d-lg-block">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/188.webp"
class="card-img-top"
alt="Bridge Over Water"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0 d-none d-lg-block">
<div class="card">
<img
src="https://mdbcdn.b-cdn.net/img/new/standard/nature/189.webp"
class="card-img-top"
alt="Purbeck Heritage Coast"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk
of the card's content.
</p>
<a href="#!" data-mdb-ripple-init class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Inner -->
</div>
<!-- Carousel wrapper -->
Video carousel
Instead of images, you can also use videos.
<!-- Carousel wrapper -->
<div
id="carouselVideoExample"
data-mdb-carousel-init class="carousel slide carousel-fade"
data-mdb-ride="carousel"
>
<!-- Indicators -->
<div class="carousel-indicators">
<button data-mdb-button-init
type="button"
data-mdb-target="#carouselVideoExample"
data-mdb-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button data-mdb-button-init
type="button"
data-mdb-target="#carouselVideoExample"
data-mdb-slide-to="1"
aria-label="Slide 2"
></button>
<button data-mdb-button-init
type="button"
data-mdb-target="#carouselVideoExample"
data-mdb-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<!-- Inner -->
<div class="carousel-inner">
<!-- Single item -->
<div class="carousel-item active">
<video class="img-fluid" autoplay loop muted>
<source src="https://mdbcdn.b-cdn.net/img/video/Tropical.mp4" type="video/mp4" />
</video>
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.
</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<video class="img-fluid" autoplay loop muted>
<source src="https://mdbcdn.b-cdn.net/img/video/forest.mp4" type="video/mp4" />
</video>
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<video class="img-fluid" autoplay loop muted>
<source
src="https://mdbcdn.b-cdn.net/img/video/Agua-natural.mp4"
type="video/mp4"
/>
</video>
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
</p>
</div>
</div>
</div>
<!-- Inner -->
<!-- Controls -->
<button data-mdb-button-init
class="carousel-control-prev"
type="button"
data-mdb-target="#carouselVideoExample"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button data-mdb-button-init
class="carousel-control-next"
type="button"
data-mdb-target="#carouselVideoExample"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Carousel wrapper -->
Gallery with modals and YouTube videos
An example of the combination of bootstrap modals and youtube video embeds.
To learn more read Modals Docs and Embeds Docs.
<!-- Modal gallery -->
<section class="">
<!-- Section: Images -->
<section class="">
<div class="row">
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<div
class="bg-image hover-overlay ripple shadow-1-strong rounded"
data-ripple-color="light"
>
<img
src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-1.webp"
class="w-100"
/>
<a href="#!" data-mdb-modal-init data-mdb-target="#exampleModal1">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>
</a>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<div
class="bg-image hover-overlay ripple shadow-1-strong rounded"
data-ripple-color="light"
>
<img
src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-2.webp"
class="w-100"
/>
<a href="#!" data-mdb-modal-init data-mdb-target="#exampleModal2">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>
</a>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<div
class="bg-image hover-overlay ripple shadow-1-strong rounded"
data-ripple-color="light"
>
<img
src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-3.webp"
class="w-100"
/>
<a href="#!" data-mdb-modal-init data-mdb-target="#exampleModal3">
<div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div>
</a>
</div>
</div>
</div>
</section>
<!-- Section: Images -->
<!-- Section: Modals -->
<section class="">
<!-- Modal 1 -->
<div
class="modal fade"
id="exampleModal1"
tabindex="-1"
aria-labelledby="exampleModal1Label"
aria-hidden="true"
>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="ratio ratio-16x9">
<iframe
src="https://www.youtube.com/embed/A3PDXmYoF5U"
title="YouTube video"
allowfullscreen
></iframe>
</div>
<div class="text-center py-3">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<!-- Modal 2 -->
<div
class="modal fade"
id="exampleModal2"
tabindex="-1"
aria-labelledby="exampleModal2Label"
aria-hidden="true"
>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="ratio ratio-16x9">
<iframe
src="https://www.youtube.com/embed/wTcNtgA6gHs"
title="YouTube video"
allowfullscreen
></iframe>
</div>
<div class="text-center py-3">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<!-- Modal 3 -->
<div
class="modal fade"
id="exampleModal3"
tabindex="-1"
aria-labelledby="exampleModal3Label"
aria-hidden="true"
>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="ratio ratio-16x9">
<iframe
src="https://www.youtube.com/embed/vlDzYIIOYmM"
title="YouTube video"
allowfullscreen
></iframe>
</div>
<div class="text-center py-3">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Modals -->
</section>
<!-- Modal gallery -->
Lightbox
If you need advanced options you can use MDBootstrap LightBox component.
Note: This component requires MDBootstrap Pro package.
<div class="lightbox" data-mdb-lightbox-init>
<div class="row">
<div class="col-lg-6">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table Full of Spices"
class="w-100 mb-2 mb-md-4 shadow-1-strong rounded"
/>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Square/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Square/1.webp"
alt="Coconut with Strawberries"
class="w-100 shadow-1-strong rounded"
/>
</div>
<div class="col-lg-6">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Vertical/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Vertical/1.webp"
alt="Dark Roast Iced Coffee"
class="w-100 shadow-1-strong rounded"
/>
</div>
</div>
</div>
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.
<div class="lightbox" data-mdb-lightbox-init>
<div class="multi-carousel" data-mdb-multi-carousel-init>
<div class="multi-carousel-inner">
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table Full of Spices"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
alt="Place Royale Bruxelles"
class="w-100"
/>
</div>
</div>
<button data-mdb-button-init
class="carousel-control-prev"
type="button"
tabindex="0"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button data-mdb-button-init
class="carousel-control-next"
type="button"
tabindex="0"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
</div>
Vertical multi item carousel
Vertical implementation of Multi Item carousel.
Note: This component requires MDBootstrap Pro package.
<div class="ecommerce-gallery vertical" data-mdb-ecommerce-gallery-init>
<div class="row">
<div class="col-4 col-sm-3">
<div class="multi-carousel vertical" data-mdb-multi-carousel-init data-mdb-items="3">
<div class="multi-carousel-inner">
<div class="multi-carousel-item active">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="active w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp"
alt="Winter Landscape"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp"
alt="View of the City in the Mountains"
class="w-100"
/>
</div>
<div class="multi-carousel-item">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/4.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/4.webp"
alt="Place Royale Bruxelles"
class="w-100"
/>
</div>
</div>
<button
class="carousel-control-prev"
tabindex="0"
type="button"
data-mdb-slide="prev"
>
<span
class="carousel-control-prev-icon"
aria-hidden="true"
></span>
</button>
<button
class="carousel-control-next"
tabindex="0"
type="button"
data-mdb-slide="next"
>
<span
class="carousel-control-next-icon"
aria-hidden="true"
></span>
</button>
</div>
</div>
<div class="col-8 col-sm-9">
<div class="lightbox" data-mdb-lightbox-init>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
alt="Table full of spices"
class="ecommerce-gallery-main-img active w-100"
/>
</div>
</div>
</div>
</div>
eCommerce gallery
An example of gallery with zoom effect, adjusted to eCommerce projects.
To learn more read eCommerce Gallery Docs.
Note: This component requires MDBootstrap Pro package.
<div class="ecommerce-gallery" data-mdb-ecommerce-gallery-init data-mdb-zoom-effect="true" data-mdb-auto-height="true">
<div class="row py-3 shadow-5">
<div class="col-12 mb-1">
<div class="lightbox" data-mdb-lightbox-init>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
alt="Gallery image 1"
class="ecommerce-gallery-main-img active w-100"
/>
</div>
</div>
<div class="col-3 mt-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/14a.webp"
alt="Gallery image 1"
class="active w-100"
/>
</div>
<div class="col-3 mt-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
alt="Gallery image 2"
class="w-100"
/>
</div>
<div class="col-3 mt-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13a.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13a.webp"
alt="Gallery image 3"
class="w-100"
/>
</div>
<div class="col-3 mt-1">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15a.webp"
data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/15a.webp"
alt="Gallery image 4"
class="w-100"
/>
</div>
</div>
</div>
Full page gallery
An example of full-page usage of the gallery.
Click on the image to see live demo.
