How To Create Responsive Lightbox Gallery With Bootstrap 4
Gallery
Bootstrap Gallery - examples & tutorial
A stunning collection of responsive galleries created with the latest Bootstrap 5. Image gallery, video gallery, photo gallery, full-page, eCommerce, lightbox, slider, thumbnails, and many more.
Static images
An example with the usage of static images.
To learn more read Images Docs.
- HTML
<!-- Gallery --> <div class="row"> <div class="col-lg-4 col-md-12 mb-4 mb-lg-0"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg" class="w-100 shadow-1-strong rounded mb-4" alt="" /> <img src="https://mdbootstrap.com/img/Photos/Vertical/mountain1.jpg" class="w-100 shadow-1-strong rounded mb-4" alt="" /> </div> <div class="col-lg-4 mb-4 mb-lg-0"> <img src="https://mdbootstrap.com/img/Photos/Vertical/mountain2.jpg" class="w-100 shadow-1-strong rounded mb-4" alt="" /> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg" class="w-100 shadow-1-strong rounded mb-4" alt="" /> </div> <div class="col-lg-4 mb-4 mb-lg-0"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" class="w-100 shadow-1-strong rounded mb-4" alt="" /> <img src="https://mdbootstrap.com/img/Photos/Vertical/mountain3.jpg" class="w-100 shadow-1-strong rounded mb-4" alt="" /> </div> </div> <!-- Gallery --> 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.
.jpg)
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
.jpg)
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.jpg)
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
- HTML
<!-- Carousel wrapper --> <div id="carouselBasicExample" class="carousel slide carousel-fade" data-mdb-ride="carousel" > <!-- Indicators --> <div class="carousel-indicators"> <button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="0" class="active" aria-current="true" aria-label="Slide 1" ></button> <button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="1" aria-label="Slide 2" ></button> <button type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide-to="2" aria-label="Slide 3" ></button> </div> <!-- Inner --> <div class="carousel-inner"> <!-- Single item --> <div class="carousel-item active"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p> Nulla vitae elit libero, a pharetra augue mollis interdum. </p> </div> </div> <!-- Single item --> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(22).jpg" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> </div> <!-- Single item --> <div class="carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(23).jpg" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p> Praesent commodo cursus magna, vel scelerisque nisl consectetur. </p> </div> </div> </div> <!-- Inner --> <!-- Controls --> <button class="carousel-control-prev" type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-mdb-target="#carouselBasicExample" data-mdb-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <!-- Carousel wrapper --> Multi-item carousel
By using a combination of available classes you can create a carousel with multiple items on each slide.
If you need more advanced options and examples of multi-item carousel have a look at Multi-item Carousel Docs
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
- HTML
<!-- Carousel wrapper --> <div id="carouselMultiItemExample" class="carousel slide carousel-dark text-center" data-mdb-ride="carousel" > <!-- Controls --> <div class="d-flex justify-content-center mb-4"> <button class="carousel-control-prev position-relative" type="button" data-mdb-target="#carouselMultiItemExample" data-mdb-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next position-relative" type="button" data-mdb-target="#carouselMultiItemExample" data-mdb-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <!-- Inner --> <div class="carousel-inner py-4"> <!-- Single item --> <div class="carousel-item active"> <div class="container"> <div class="row"> <div class="col-lg-4"> <div class="card"> <img src="https://mdbootstrap.com/img/new/standard/nature/181.jpg" class="card-img-top" alt="..." /> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#!" class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-lg-4 d-none d-lg-block"> <div class="card"> <img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." /> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#!" class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-lg-4 d-none d-lg-block"> <div class="card"> <img src="https://mdbootstrap.com/img/new/standard/nature/183.jpg" class="card-img-top" alt="..." /> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#!" class="btn btn-primary">Button</a> </div> </div> </div> </div> </div> </div> <!-- Single item --> <div class="carousel-item"> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-12"> <div class="card"> <img src="https://mdbootstrap.com/img/new/standard/nature/184.jpg" class="card-img-top" alt="..." /> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#!" class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-lg-4 d-none d-lg-block"> <div class="card"> <img src="https://mdbootstrap.com/img/new/standard/nature/185.jpg" class="card-img-top" alt="..." /> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#!" class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-lg-4 d-none d-lg-block"> <div class="card"> <img src="https://mdbootstrap.com/img/new/standard/nature/186.jpg" class="card-img-top" alt="..." /> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#!" class="btn btn-primary">Button</a> </div> </div> </div> </div> </div> </div> <!-- Single item --> <div class="carousel-item"> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-12 mb-4 mb-lg-0"> <div class="card"> <img src="https://mdbootstrap.com/img/new/standard/nature/187.jpg" class="card-img-top" alt="..." /> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#!" class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-lg-4 mb-4 mb-lg-0 d-none d-lg-block"> <div class="card"> <img src="https://mdbootstrap.com/img/new/standard/nature/188.jpg" class="card-img-top" alt="..." /> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#!" class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-lg-4 mb-4 mb-lg-0 d-none d-lg-block"> <div class="card"> <img src="https://mdbootstrap.com/img/new/standard/nature/189.jpg" class="card-img-top" alt="..." /> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#!" class="btn btn-primary">Button</a> </div> </div> </div> </div> </div> </div> </div> <!-- Inner --> </div> <!-- Carousel wrapper --> Video carousel
Instead of images, you can also use videos.
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.
- HTML
<!-- Carousel wrapper --> <div id="carouselVideoExample" class="carousel slide carousel-fade" data-mdb-ride="carousel" > <!-- Indicators --> <div class="carousel-indicators"> <button type="button" data-mdb-target="#carouselVideoExample" data-mdb-slide-to="0" class="active" aria-current="true" aria-label="Slide 1" ></button> <button type="button" data-mdb-target="#carouselVideoExample" data-mdb-slide-to="1" aria-label="Slide 2" ></button> <button type="button" data-mdb-target="#carouselVideoExample" data-mdb-slide-to="2" aria-label="Slide 3" ></button> </div> <!-- Inner --> <div class="carousel-inner"> <!-- Single item --> <div class="carousel-item active"> <video class="img-fluid" autoplay loop muted> <source src="https://mdbootstrap.com/img/video/Tropical.mp4" type="video/mp4" /> </video> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p> Nulla vitae elit libero, a pharetra augue mollis interdum. </p> </div> </div> <!-- Single item --> <div class="carousel-item"> <video class="img-fluid" autoplay loop muted> <source src="https://mdbootstrap.com/img/video/forest.mp4" type="video/mp4" /> </video> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> </div> <!-- Single item --> <div class="carousel-item"> <video class="img-fluid" autoplay loop muted> <source src="https://mdbootstrap.com/img/video/Agua-natural.mp4" type="video/mp4" /> </video> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p> Praesent commodo cursus magna, vel scelerisque nisl consectetur. </p> </div> </div> </div> <!-- Inner --> <!-- Controls --> <button class="carousel-control-prev" type="button" data-mdb-target="#carouselVideoExample" data-mdb-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-mdb-target="#carouselVideoExample" data-mdb-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <!-- Carousel wrapper --> Gallery with modals and YouTube videos
An example of the combination of bootstrap modals and youtube video embeds.
To learn more read Modals Docs and Embeds Docs.
- HTML
<!-- Modal gallery --> <section class=""> <!-- Section: Images --> <section class=""> <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" data-ripple-color="light" > <img src="https://mdbootstrap.com/img/screens/yt/screen-video-1.jpg" class="w-100" /> <a href="#!" data-mdb-toggle="modal" data-mdb-target="#exampleModal1"> <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" data-ripple-color="light" > <img src="https://mdbootstrap.com/img/screens/yt/screen-video-2.jpg" class="w-100" /> <a href="#!" data-mdb-toggle="modal" data-mdb-target="#exampleModal2"> <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" data-ripple-color="light" > <img src="https://mdbootstrap.com/img/screens/yt/screen-video-3.jpg" class="w-100" /> <a href="#!" data-mdb-toggle="modal" data-mdb-target="#exampleModal3"> <div class="mask" style="background-color: rgba(251, 251, 251, 0.2);"></div> </a> </div> </div> </div> </section> <!-- Section: Images --> <!-- Section: Modals --> <section class=""> <!-- Modal 1 --> <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModal1Label" aria-hidden="true" > <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="ratio ratio-16x9"> <iframe src="https://www.youtube.com/embed/A3PDXmYoF5U" title="YouTube video" allowfullscreen ></iframe> </div> <div class="text-center py-3"> <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal"> Close </button> </div> </div> </div> </div> <!-- Modal 2 --> <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModal2Label" aria-hidden="true" > <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="ratio ratio-16x9"> <iframe src="https://www.youtube.com/embed/wTcNtgA6gHs" title="YouTube video" allowfullscreen ></iframe> </div> <div class="text-center py-3"> <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal"> Close </button> </div> </div> </div> </div> <!-- Modal 3 --> <div class="modal fade" id="exampleModal3" tabindex="-1" aria-labelledby="exampleModal3Label" aria-hidden="true" > <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="ratio ratio-16x9"> <iframe src="https://www.youtube.com/embed/vlDzYIIOYmM" title="YouTube video" allowfullscreen ></iframe> </div> <div class="text-center py-3"> <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal"> Close </button> </div> </div> </div> </div> </section> <!-- Section: Modals --> </section> <!-- Modal gallery --> Lightbox
If you need advanced options you can use MDBootstrap LightBox component.
Note: This component requires MDBootstrap Pro package.
- HTML
<div class="lightbox"> <div class="row"> <div class="col-lg-6"> <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg" data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/1.jpg" alt="Lightbox image 1" class="w-100 mb-2 mb-md-4 shadow-1-strong rounded" /> <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Square/1.jpg" data-mdb-img="https://mdbootstrap.com/img/Photos/Square/1.jpg" alt="Lightbox image 2" class="w-100 shadow-1-strong rounded" /> </div> <div class="col-lg-6"> <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Vertical/1.jpg" data-mdb-img="https://mdbootstrap.com/img/Photos/Vertical/1.jpg" alt="Lightbox image 3" class="w-100 shadow-1-strong rounded" /> </div> </div> </div> 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.
- HTML
<div class="lightbox"> <div class="multi-carousel"> <div class="multi-carousel-inner"> <div class="multi-carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg" data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/1.jpg" alt="Gallery image 1" class="w-100" /> </div> <div class="multi-carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.jpg" data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/2.jpg" alt="Gallery image 2" class="w-100" /> </div> <div class="multi-carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.jpg" data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/3.jpg" alt="Gallery image 3" class="w-100" /> </div> <div class="multi-carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.jpg" data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/4.jpg" alt="Gallery image 4" class="w-100" /> </div> </div> <button class="carousel-control-prev" type="button" tabindex="0" data-mdb-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> </button> <button class="carousel-control-next" type="button" tabindex="0" data-mdb-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true"></span> </button> </div> </div> Vertical multi item carousel
Vertical implementation of Multi Item carousel.
Note: This component requires MDBootstrap Pro package.
- HTML
<div class="multi-carousel vertical" style="max-width: 20rem;"> <div class="multi-carousel-inner"> <div class="multi-carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.jpg" alt="Gallery image 1" class="w-100" /> </div> <div class="multi-carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.jpg" alt="Gallery image 2" class="w-100" /> </div> <div class="multi-carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.jpg" alt="Gallery image 3" class="w-100" /> </div> <div class="multi-carousel-item"> <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/4.jpg" alt="Gallery image 4" class="w-100" /> </div> </div> <button class="carousel-control-prev" type="button" tabindex="0" data-mdb-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> </button> <button class="carousel-control-next" type="button" tabindex="0" data-mdb-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </button> </div> 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.
- HTML
<div class="ecommerce-gallery" data-mdb-zoom-effect="true" data-mdb-auto-height="true"> <div class="row py-3 shadow-5"> <div class="col-12 mb-1"> <div class="lightbox"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.jpg" alt="Gallery image 1" class="ecommerce-gallery-main-img active w-100" /> </div> </div> <div class="col-3 mt-1"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.jpg" data-mdb-img="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/14a.jpg" alt="Gallery image 1" class="active w-100" /> </div> <div class="col-3 mt-1"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.jpg" data-mdb-img="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/12a.jpg" alt="Gallery image 2" class="w-100" /> </div> <div class="col-3 mt-1"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.jpg" data-mdb-img="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/13a.jpg" alt="Gallery image 3" class="w-100" /> </div> <div class="col-3 mt-1"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15a.jpg" data-mdb-img="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/15a.jpg" alt="Gallery image 4" class="w-100" /> </div> </div> </div> Full page gallery
An example of full-page usage of the gallery.
Click on the image to see live demo.
If you want to support our friends from Tailwind Elements you can also check out the Tailwind gallery documentation.
How To Create Responsive Lightbox Gallery With Bootstrap 4
Source: https://mdbootstrap.com/docs/standard/extended/gallery/
Posted by: lundprionat.blogspot.com
0 Response to "How To Create Responsive Lightbox Gallery With Bootstrap 4"
Post a Comment