Modal image
Bootstrap 5 Modal image component
Responsive Modal image built with Bootstrap 5. Modal image is a responsive gallery with the option to enlarge selected photos or videos.
Basic example
A basic example of a modal image with the most common use case with the bootstrap grid.
<div class="lightbox" data-mdb-lightbox-init> <div class="row"> <div class="col-lg-4"> <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" /> </div> <div class="col-lg-4"> <img src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp" data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp" alt="Winter Landscape" class="w-100" /> </div> <div class="col-lg-4"> <img src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp" data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp" alt="View of the City in the Mountains" class="w-100" /> </div> </div> </div> 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.
<!-- 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://mdbcdn.b-cdn.net/img/screens/yt/screen-video-1.webp" class="w-100" /> <a href="#!" data-mdb-modal-init 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://mdbcdn.b-cdn.net/img/screens/yt/screen-video-2.webp" class="w-100" /> <a href="#!" data-mdb-modal-init 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://mdbcdn.b-cdn.net/img/screens/yt/screen-video-3.webp" class="w-100" /> <a href="#!" data-mdb-modal-init 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> </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> </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> </div> </div> </section> <!-- Section: Modals --> </section> <!-- Modal gallery -->