Bootstrap 3 CSS Responsive Image Gallery


Hello Everyone! Welcome to this Bootstrap CSS tutorial on how to create a responsive image gallery. This image gallery will include image thumbnails; that when clicked will display a modal with a full sized view of the image. The first thing to do is to make sure that
you include a link to the bootstrap CSS, your project CSS files,
jQuery, and bootstrap JavaScript within the head section of your document. Make sure to list jQuery before bootstrap javascript so that it loads first. First, I will create a container within the body of my document. Next, I will make a
bootstrap grid by creating a div with the class of row. Within that row, I will
make a div with the class of col-md-4 which spans across 4 column spaces
within our grid on medium and larger devices. Elements will display as stacked on
smaller devices. Within my column, I will create an anchor tag with the class of Pop which will be the class that we target for the click function within our JavaScript. This will bring up the full-sized image. Within the anchor tag, I will create an image tag. I want two more columns with the class
of col-md-4 with two more images. I have uploaded my images to
albumupload.com so I will copy and paste the image link from there. Here is a preview of the bootstrap image gallery so far. You can see that the bootstrap
grid is responsive. Within my CSS code, I will give the images some style including a width and height make them small thumbnails. Next, I will make the image modal. This modal will pop-up a full sized view of
our image when a thumbnail is clicked. Within the modal, we will create an empty
image tag with the class of “imagepreview” and a width of 100%. We will use that “imagepreview” class in our JavaScript. Here is our JavaScript. This is a click function that is triggered when elements within the class of “pop” are clicked. When a user clicks on a thumbnail, our previously blank image tag within the modal will now have the image link from the clicked upon thumbnail. The next line of code opens the modal. Here is how our bootstrap image gallery is working now. When we click on any of the thumbnails, they are displayed in a nice modal window. If you need any assistance or have
enjoyed this tutorial, please leave me a comment. Thank you for watching this
tutorial on bootstrap responsive image gallery! Please subscribe to my channel
Bootstrap CSS Girl! 🙂

3 Comments

Add a Comment

Your email address will not be published. Required fields are marked *