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