I’m having trouble lining up images in a row with Bootstrap. I could make them smaller, but it looks like they should be able to fit. I know I could also put two on top and then one underneath, but I would like to figure out how to get them all lined up! I’ve got them all in rows and columns. My code is below.
See the Pen KqEGQG by Mother Bear (@Bearcares) on CodePen.
You have a misplaced closing </div> tag, after the first column. It should be right after the last image.
Why do you have empty <a> tags?
The second two thumbnail groups aren’t in the row.
If you move them up into .row, it will start to work for you.
Also, your jumbotron image… way too big for website use. Gotta try and reduce that file size.
Thank you! It worked great once I moved that</div>. As far as the <a> tags go, I think I copied how to make thumbnail images with Bootstrap from W3Schools and for some reason they did the <a> tag with the images and then the <img> tag afterwards. I was a bit confused why it was that way but I just copied it in hope it would work. Maybe I should try and get rid of them and see if it still works?
Thanks for the tip, I will try and figure out how to reduce the file size. I’m a bit new at this!
In the examples from w3schools that I found, the <img> tags are nested inside the <a> tags, and the <a> tags lead to the original images. You could do the same if somehow you want to go to the original image when they are clicked on your page. Otherwise you can just remove those <a> tags.
Oh OK that makes more sense. I think I will just remove them, thank you.
