Stay Updated

Subscribe to Bootsnipp newsletter. (only important updates will be sent, your email is never shared or sold to anyone else)

Dan's Deals All Deals

Recent Comments

I added bootstrap and jQuery, but some functions are still not working like images are all in one column, then the lightbox works but image comes from top and black overlay not showing in the correct position. Any reasons why this has note yet been fully implemented in my page?
Responsive Lightbox Gallery With Popup on click with Description. NO JS. Only CSS. Any size Image fits Well. Awesome Effects.

I was having trouble with it loading the Font Awesome file within my Bootstrap project. If anyone else is, this is what I did: I added the line font-family: FontAwesome; to .gal-item a:after{This problem seems to stem from adding the content:"\f00e"; to the :after psuedo class. Specifying that it is a FontAwesome seems to clear the issue right up. And yes, I did change the content ID number, I am using a different version of Font Awesome. Please search for different symbols within the appropriate Font Awesome version.
Responsive Lightbox Gallery With Popup on click with Description. NO JS. Only CSS. Any size Image fits Well. Awesome Effects.

Not sure if this is a bug, but some pictures do not resize correctly to fit within the modal, and thus require scrolling. Have you encountered this? Some of my images can resize to the modal's size, but others do not (they are all JPEGs).
Responsive Lightbox Gallery With Popup on click with Description. NO JS. Only CSS. Any size Image fits Well. Awesome Effects.

Hello,If you plan implement this in bootstrap you must remove this part of the css or the lightbox will not show up :/.gal-container .modal.fade .modal-dialog { -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -ms-transform: scale(0.1); transform: scale(0.1); top: 100px; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}/:)
Responsive Lightbox Gallery With Popup on click with Description. NO JS. Only CSS. Any size Image fits Well. Awesome Effects.

No I forgot to add that in. Thanks. It's working now on the local development machine.
Responsive Lightbox Gallery With Popup on click with Description. NO JS. Only CSS. Any size Image fits Well. Awesome Effects.

Are you including bootstrap and jquery? Those don't show in the code, because they are assumed because this is a bootstrap snippet.
Responsive Lightbox Gallery With Popup on click with Description. NO JS. Only CSS. Any size Image fits Well. Awesome Effects.

I should add that it works fine on Bootsnip but not when the HTML and CSS are copied to appropriate HTML/CSS files on a local development machine. Is there something else that is referenced (perhaps some JS) that is not listed, or other CSS files?
Responsive Lightbox Gallery With Popup on click with Description. NO JS. Only CSS. Any size Image fits Well. Awesome Effects.

Does not seem to work on local machine when code is copied. Displays images full width, and when clicked (which only the first two images appear to be links) it display a small box only, no lightbox effect.
Responsive Lightbox Gallery With Popup on click with Description. NO JS. Only CSS. Any size Image fits Well. Awesome Effects.