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>