Bootstrap 5 Image Gallery with modal Responsive

Rumman Ansari   2022-09-14   Developer   web development > bootstrap, php, modal   532 Share
Create Modal Using Bootstrap 5 and Javascript

Download this project Click Here

HTML Code 


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Image Gallery - Bootstrap 5</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  

  <section class="gallery min-vh-100">
     <div class="container-lg">
        <div class="row gy-4 row-cols-1 row-cols-sm-2 row-cols-md-3">
           <div class="col">
              <img src="img/1.jpg" class="gallery-item" alt="gallery">
           </div>
           <div class="col">
              <img src="img/2.jpg" class="gallery-item" alt="gallery">
           </div>
           <div class="col">
              <img src="img/3.jpg" class="gallery-item" alt="gallery">
           </div>
           <div class="col">
              <img src="img/4.jpg" class="gallery-item" alt="gallery">
           </div>
           <div class="col">
              <img src="img/5.jpg" class="gallery-item" alt="gallery">
           </div>
           <div class="col">
              <img src="img/6.jpg" class="gallery-item" alt="gallery">
           </div>
        </div>
     </div>
  </section>

<!-- Modal -->
<div class="modal fade" id="gallery-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <!-- <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> -->
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
         <img src="img/1.jpg" class="modal-img" alt="modal img">
      </div>
    </div>
  </div>
</div>


<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

JS Code 




 document.addEventListener("click",function (e){
   if(e.target.classList.contains("gallery-item")){
   	  const src = e.target.getAttribute("src");
   	  document.querySelector(".modal-img").src = src;
   	  const myModal = new bootstrap.Modal(document.getElementById('gallery-modal'));
   	  myModal.show();
   }
 })

CSS Code 


img{
	max-width: 100%;
}
.gallery{
	background-color: #dbddf1;
	padding: 80px 0;
}
.gallery img{
	background-color: #ffffff;
	padding: 15px;
	width: 100%;
	box-shadow: 0 0 15px rgba(0,0,0,0.3);
	cursor: pointer;
}
#gallery-modal .modal-img{
	width: 100%;
}
Share this Post: