Bootstrap 4 - image gallery, popout window required! I'm clueless

Hi, I have recently started copying & pasting code to create a gallery website. I am using bootstrap 4

i created a lightbox gallery previously in bootstrap 3. (i just followed a tutorial). the result was that i have a grid of images, when i click on an image a window pops up. within this window are arrows that allow the user to scroll through the rest of the images from the grid (without closing the seperate window)

I used this same tutorial for bootstrap 4, but it did not work.. assuming the coding has changed... i don't even mind not having the arrows to scroll through! i just want it so when an image on the grid is clicked it opens up in a lightbox window..

any ideas? any help much appreciated!

if your copy/pasting from another design, you're probably missing the CSS and JS code. I'd tried drag/drop the lightbox gallery to your design and then delete it. This will add the CSS and JS for you and it will stay after deleting the component. Then try the preview again to see if the lightbox then starts working.

If you have the CSS and JS already, then it could be that the JS order needs to be adjusted if you have more the one custom/added JS file. Right click on the Javascript menu on the bottom right and select Include order... then drag the lightbox JS to be first in order and see if it work after that.


Another thing to consider is what you touched on in your post already. The code may have changed and you may be trying to apply Bootstrap 3 code to a Bootstrap 4 site and that may be causing issues. Best bet would be to go to Bootstrap's website and see if the code is different there than what you are trying to apply. Most likely Saj's suggestions will fix it, but in case it doesn't, then check the code validity for Bootstrap 4.