Как правильно сделать список картинок booostrap?

Question

[Максим К]

Всем привет. Взял готовый шаблон, в нем организована галлерея картинок через сетку bootstrap + fancybox. Когда нажимаешь на кортинку - работают эффекты и отображаются миниатюры. Сама сетка - адаптивна под мобильники. Удалил лишний код от fancybox, и оставив саму сетку с тегом - перехода по ссылке не получается (((

Сейчас кусок кода с 1-м изображением выглядит так:

<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>

Как сделать галлерею картинок - грубо сетка 3 в ширину и 12 в длину, чот бы при нажатии на картинку - переходить далее в каталог.

В гугле искал, но это не галлерея картинок, а простых вариантов решения не нашел. Шаблон весь на boostrap. СПАСИБО

Answer 1

[Максим К]

Вот нашел одно из решений - вроде работает.

<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>