Galerie

Galerie Bootstrap - exemples gratuits, modèles et tutoriels

Galeries réactives créées avec Bootstrap 5. Galerie d'images, galerie de vidéos, galerie de photos, pleine page, eCommerce, lightbox, slider, miniatures et plus encore.


Images statiques

Un exemple d'utilisation des images statiques.

Pour en savoir plus, lisez la Documentation des Images.

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





Lightbox

Si vous avez besoin d'options avancées, vous pouvez utiliser le composant LightBox de MDBootstrap.

Remarque: Ce composant nécessite le paquet MDBootstrap Pro.

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