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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s