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.

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



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>




...
AI Chat