How to properly make a list of booostrap images?

Question

Bootstrap

Hello. I took a ready-made template, it organizes a gallery of pictures through the bootstrap + fancybox grid. When you click on the button, the effects work and thumbnails are displayed. The grid itself is adaptive for mobile phones. I removed the extra code from fancybox, and leaving the grid itself with the tag - the link does not work (((
Now the piece of code with the 1st image looks like this:

<li class="item-thumbs col-lg-3 design">
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Portfolio name" href="imgs/4.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>

<img src="img/works/4.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
</li>

How to make a gallery of pictures - roughly a grid of 3 wide and 12 long, so that when you click on the picture - go further to the directory.
I searched in Google, but this is not a gallery of pictures, but I did not find simple solutions. The template is all on boostrap. THANK YOU

Answer 1

I found one of the solutions - it seems to work.

<div class="col-lg-3">
                  <div class="thumbnail">
                    <a href="index.html" target="_blank">
                    <img src="img\3.jpg" alt="Lights" style="width:100%">
                    <div class="caption">
                      <p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
                    </div>
                    </a>
                  </div>
                  </div>

                  <div class="col-lg-3">
                  <div class="thumbnail">
                    <a href="index.html" target="_blank">
                    <img src="img\2.jpg" alt="Lights" style="width:100%">
                    <div class="caption">
                      <p>Lorem ipsum donec id elit non mi porta gravida at eget metus.</p>
                    </div>
                    </a>
                  </div>
                  </div>