Gallery
Vue Bootstrap Gallery - free examples, templates & tutorial
Responsive Vue 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)
<template> <!-- 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 --> </template> 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.
<template> <MDBCarousel v-model="carousel1" :items="items1" fade /> </template> <script> import { ref } from "vue"; import { MDBCarousel } from "mdb-vue-ui-kit"; export default { components: { MDBCarousel }, setup() { const items1 = [{ src: "https://mdbootstrap.com/img/Photos/Slides/img%20(15).webp", alt: "...", label: "First slide label", caption: "Nulla vitae elit libero, a pharetra augue mollis interdum." }, { src: "https://mdbootstrap.com/img/Photos/Slides/img%20(22).webp", alt: "...", label: "Second slide label", caption: "Lorem ipsum dolor sit amet, consectetur adipiscing elit." }, { src: "https://mdbootstrap.com/img/Photos/Slides/img%20(23).webp", alt: "...", label: "Third slide label", caption: "Praesent commodo cursus magna, vel scelerisque nisl consectetur." } ]; const carousel1 = ref(0); return { items1, carousel1 }; } }; </script> Gallery with modals and YouTube videos
An example of the combination of bootstrap modals and youtube video embeds.
To learn more read Modals Docs.
<template> <!-- Button trigger modal --> <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"> <img src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-1.webp" class="w-100" /> <a href="#!" @click="exampleModal = true"> <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"> <img src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-2.webp" class="w-100" /> <a href="#!" @click="exampleModal2 = true"> <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"> <img src="https://mdbcdn.b-cdn.net/img/screens/yt/screen-video-3.webp" class="w-100" /> <a href="#!" @click="exampleModal3 = true"> <div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div> </a> </div> </div> </div> <MDBModal id="exampleModal" tabindex="-1" labelledby="exampleModalLabel" v-model="exampleModal"> <MDBModalBody> <div class="ratio ratio-16x9"> <iframe src="https://www.youtube.com/embed/A3PDXmYoF5U" title="YouTube video" allowfullscreen></iframe> </div> </MDBModalBody> <MDBModalFooter> <MDBBtn color="secondary" @click="exampleModal = false">Close</MDBBtn> </MDBModalFooter> </MDBModal> <MDBModal id="exampleModal2" tabindex="-1" labelledby="exampleModalLabel2" v-model="exampleModal2"> <MDBModalBody> <div class="ratio ratio-16x9"> <iframe src="https://www.youtube.com/embed/wTcNtgA6gHs" title="YouTube video" allowfullscreen></iframe> </div> </MDBModalBody> <MDBModalFooter> <MDBBtn color="secondary" @click="exampleModal2 = false">Close</MDBBtn> </MDBModalFooter> </MDBModal> <MDBModal id="exampleModal3" tabindex="-1" labelledby="exampleModalLabel3" v-model="exampleModal3"> <MDBModalBody> <div class="ratio ratio-16x9"> <iframe src="https://www.youtube.com/embed/vlDzYIIOYmM" title="YouTube video" allowfullscreen></iframe> </div> </MDBModalBody> <MDBModalFooter> <MDBBtn color="secondary" @click="exampleModal3 = false">Close</MDBBtn> </MDBModalFooter> </MDBModal> </template> <script> import { MDBModal, MDBModalBody, MDBModalFooter, MDBBtn, } from 'mdb-vue-ui-kit'; import { ref } from 'vue'; export default { components: { MDBModal, MDBModalBody, MDBModalFooter, MDBBtn, }, setup() { const exampleModal = ref(false); const exampleModal2 = ref(false); const exampleModal3 = ref(false); return { exampleModal, exampleModal2, exampleModal3, }; }, }; </script> Lightbox
If you need advanced options you can use MDBootstrap LightBox component.
Note: This component requires MDBootstrap Pro package.
<template> <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" alt="Lightbox image 1" class="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" alt="Lightbox image 2" class="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" alt="Lightbox image 3" class="w-100" /> </MDBCol> </MDBRow> </MDBLightbox> </template> <script> import { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } from 'mdb-vue-ui-kit'; export default { components: { MDBLightbox, MDBLightboxItem, MDBRow, MDBCol } }; </script> 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.
<template> <MDBMultiCarousel :images="[ { src: 'https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg', alt: 'Gallery image 1', class: 'w-100', }, { src: 'https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.jpg', alt: 'Gallery image 2', class: 'w-100', }, { src: 'https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.jpg', alt: 'Gallery image 3', class: 'w-100', }, { src: 'https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.jpg', alt: 'Gallery image 4', class: 'w-100', }, ]" /> </template> <script> import { MDBBtn } from "mdb-vue-ui-kit"; export default { components: { MDBBtn } }; </script> Vertical multi item carousel
Vertical implementation of Multi Item carousel.
Note: This component requires MDBootstrap Pro package.
<template> <MDBMultiCarousel vertical style="max-width: 20rem"> <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg" alt="Gallery image 1" class="w-100" /> <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.jpg" alt="Gallery image 2" class="w-100" /> <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.jpg" alt="Gallery image 3" class="w-100" /> <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.jpg" alt="Gallery image 4" class="w-100" /> </MDBMultiCarousel> </template> <script> import { MDBMultiCarousel } from "mdb-vue-multi-carousel"; export default { components: { MDBMultiCarousel } }; </script> 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.
<template> <MDBRow> <MDBCol col="6"> <MDBECommerceGallery :lightboxRef="lightbox12" zoomEffect autoHeight> <MDBRow class="py-3 shadow-5"> <MDBCol col="12" class="mb-1"> <MDBLightbox ref="lightbox12"> <MDBLightboxItem src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.webp" alt="Gallery image 1" class="ecommerce-gallery-main-img active w-100" /> </MDBLightbox> </MDBCol> <MDBCol class="mt-1"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.webp" data-fullscreen-src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.webp" alt="Gallery image 1" class="active w-100" /> </MDBCol> <MDBCol class="mt-1"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.webp" data-fullscreen-src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.webp" alt="Gallery image 2" class="w-100" /> </MDBCol> <MDBCol class="mt-1"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.webp" data-fullscreen-src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.webp" alt="Gallery image 3" class="w-100" /> </MDBCol> <MDBCol class="mt-1"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15a.webp" data-fullscreen-src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15a.webp" alt="Gallery image 4" class="w-100" /> </MDBCol> </MDBRow> </MDBECommerceGallery> </MDBCol> </MDBRow> </template> <script> import { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem } from "mdb-vue-ui-kit"; import { MDBECommerceGallery } from "mdb-vue-ecommerce-gallery"; import { ref } from "vue"; export default { components: { MDBRow, MDBCol, MDBLightbox, MDBLightboxItem, MDBECommerceGallery }, setup() { const lightbox12 = ref(null) return { lightbox12 } } }; </script>