Topics

Bootstrap 5 Image Gallery with modal Responsive

Rumman Ansari 2022-09-14 Developer web development > bootstrap, php, modal 571 Share

Create Modal Using Bootstrap 5 and Javascript

Download this project Click Here

HTML Code

<span class="pln">
</span><span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;head&gt;</span><span class="pln">
  </span><span class="tag">&lt;title&gt;</span><span class="pln">Image Gallery - Bootstrap 5</span><span class="tag">&lt;/title&gt;</span><span class="pln">
  </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"width=device-width, initial-scale=1"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/css"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"css/bootstrap.min.css"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/css"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"css/style.css"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/head&gt;</span><span class="pln">
</span><span class="tag">&lt;body&gt;</span><span class="pln">
  

  </span><span class="tag">&lt;section</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"gallery min-vh-100"</span><span class="tag">&gt;</span><span class="pln">
     </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container-lg"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row gy-4 row-cols-1 row-cols-sm-2 row-cols-md-3"</span><span class="tag">&gt;</span><span class="pln">
           </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col"</span><span class="tag">&gt;</span><span class="pln">
              </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"img/1.jpg"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"gallery-item"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"gallery"</span><span class="tag">&gt;</span><span class="pln">
           </span><span class="tag">&lt;/div&gt;</span><span class="pln">
           </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col"</span><span class="tag">&gt;</span><span class="pln">
              </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"img/2.jpg"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"gallery-item"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"gallery"</span><span class="tag">&gt;</span><span class="pln">
           </span><span class="tag">&lt;/div&gt;</span><span class="pln">
           </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col"</span><span class="tag">&gt;</span><span class="pln">
              </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"img/3.jpg"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"gallery-item"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"gallery"</span><span class="tag">&gt;</span><span class="pln">
           </span><span class="tag">&lt;/div&gt;</span><span class="pln">
           </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col"</span><span class="tag">&gt;</span><span class="pln">
              </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"img/4.jpg"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"gallery-item"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"gallery"</span><span class="tag">&gt;</span><span class="pln">
           </span><span class="tag">&lt;/div&gt;</span><span class="pln">
           </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col"</span><span class="tag">&gt;</span><span class="pln">
              </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"img/5.jpg"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"gallery-item"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"gallery"</span><span class="tag">&gt;</span><span class="pln">
           </span><span class="tag">&lt;/div&gt;</span><span class="pln">
           </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col"</span><span class="tag">&gt;</span><span class="pln">
              </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"img/6.jpg"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"gallery-item"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"gallery"</span><span class="tag">&gt;</span><span class="pln">
           </span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;/div&gt;</span><span class="pln">
     </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/section&gt;</span><span class="pln">

</span><span class="com">&lt;!-- Modal --&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal fade"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"gallery-modal"</span><span class="pln"> </span><span class="atn">tabindex</span><span class="pun">=</span><span class="atv">"-1"</span><span class="pln"> </span><span class="atn">aria-labelledby</span><span class="pun">=</span><span class="atv">"exampleModalLabel"</span><span class="pln"> </span><span class="atn">aria-hidden</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-dialog modal-dialog-centered modal-lg"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-content"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-header"</span><span class="tag">&gt;</span><span class="pln">
        </span><span class="com">&lt;!-- &lt;h5 class="modal-title" id="exampleModalLabel"&gt;Modal title&lt;/h5&gt; --&gt;</span><span class="pln">
        </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn-close"</span><span class="pln"> </span><span class="atn">data-bs-dismiss</span><span class="pun">=</span><span class="atv">"modal"</span><span class="pln"> </span><span class="atn">aria-label</span><span class="pun">=</span><span class="atv">"Close"</span><span class="tag">&gt;&lt;/button&gt;</span><span class="pln">
      </span><span class="tag">&lt;/div&gt;</span><span class="pln">
      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-body"</span><span class="tag">&gt;</span><span class="pln">
         </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"img/1.jpg"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"modal-img"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">"modal img"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span><span class="pln">


</span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"js/bootstrap.bundle.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
</span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"js/main.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
</span><span class="tag">&lt;/body&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span><span class="pln">
</span>

JS Code

<span class="pln">


 document</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">"click"</span><span class="pun">,</span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">e</span><span class="pun">){</span><span class="pln">
   </span><span class="kwd">if</span><span class="pun">(</span><span class="pln">e</span><span class="pun">.</span><span class="pln">target</span><span class="pun">.</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">contains</span><span class="pun">(</span><span class="str">"gallery-item"</span><span class="pun">)){</span><span class="pln">
   	  </span><span class="kwd">const</span><span class="pln"> src </span><span class="pun">=</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">target</span><span class="pun">.</span><span class="pln">getAttribute</span><span class="pun">(</span><span class="str">"src"</span><span class="pun">);</span><span class="pln">
   	  document</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str">".modal-img"</span><span class="pun">).</span><span class="pln">src </span><span class="pun">=</span><span class="pln"> src</span><span class="pun">;</span><span class="pln">
   	  </span><span class="kwd">const</span><span class="pln"> myModal </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> bootstrap</span><span class="pun">.</span><span class="typ">Modal</span><span class="pun">(</span><span class="pln">document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'gallery-modal'</span><span class="pun">));</span><span class="pln">
   	  myModal</span><span class="pun">.</span><span class="pln">show</span><span class="pun">();</span><span class="pln">
   </span><span class="pun">}</span><span class="pln">
 </span><span class="pun">})</span><span class="pln">
</span>

CSS Code

<span class="pln">
img</span><span class="pun">{</span><span class="pln">
	max</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">gallery</span><span class="pun">{</span><span class="pln">
	background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#dbddf1;</span><span class="pln">
	padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">80px</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">gallery img</span><span class="pun">{</span><span class="pln">
	background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#ffffff;</span><span class="pln">
	padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">15px</span><span class="pun">;</span><span class="pln">
	width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%;</span><span class="pln">
	box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">15px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0.3</span><span class="pun">);</span><span class="pln">
	cursor</span><span class="pun">:</span><span class="pln"> pointer</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="com">#gallery-modal .modal-img{</span><span class="pln">
	width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span>

Share this Post: