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.

Show code Edit in sandbox

HTML

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

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Show code Edit in sandbox

HTML

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

Show code Edit in sandbox

HTML

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

Show code Edit in sandbox

HTML

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

Show code Edit in sandbox

HTML

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

Show code Edit in sandbox

HTML

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

Show code Edit in sandbox

HTML

<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>

Gallery

Vue Bootstrap Gallery - free examples, templates & tutorial

Static images

Carousel / Slider

First slide label

Second slide label

Third slide label

Gallery with modals and YouTube videos

Lightbox

Advanced multi-item carousel

Vertical multi item carousel

eCommerce gallery

Related resources