Bootstrap Image Gallery

In this Bootstrap CSS tutorial, we will be creating a responsive image gallery using bootstrap 3 css, html, and javascript. The javascript consists of a simple click function. Images within our image gallery will be displayed as clickable thumbnails. Elements will be placed within a bootstrap grid system for easy alignment. When an image thumbnail is clicked, a modal image view will pop up displaying the image at 100% width.

First, I created a three column layout using a bootstrap grid and column classes of col-md-4.  Next, I put image tags wrapped in anchor tags within each column.  Then, I copied my image links from http://albumupload.com which is where I had my images saved for the purposes on my tutorial.  Then, I pasted the image links in the src field of my image elements.  After that, I created the HTML code for my modal windows.  Finally, I added the javascript for the click function which causes the images to appear as full size in the modal window once the thumbnail images are clicked.

Make sure to link to Bootstrap CSS, JQuery, and Bootstrap Javascript within the head section of your document.  Also, make sure to close all divs.

If you need any assistance, please leave a comment on the video. Please subscribe to my YouTube channel Bootstrap CSS Girl.

Advertisements