Бортовой журнал Ктулху

Сетка на Bootstrap

Отличная адаптивная сетка на Bootstrap.

screenshot 2016 06 20 15 35 19 1

<div class="container">
<div class="row">
<div class="col-lg-12">
 <h1 class="page-header">Thumbnail Gallery</h1>
 </div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
 <a class="thumbnail" href="#">
 <img class="img-responsive" src="/<a href="http://placehold.it/400x300"">http://placehold.it/400x300"</a> alt="">
 </a>
 </div>
 <div class="col-lg-3 col-md-4 col-xs-6 thumb">
 <a class="thumbnail" href="#">
 <img class="img-responsive" src="/<a href="http://placehold.it/400x300"">http://placehold.it/400x300"</a> alt="">
 </a>
 </div>
 <div class="col-lg-3 col-md-4 col-xs-6 thumb">
 <a class="thumbnail" href="#">
 <img class="img-responsive" src="/<a href="http://placehold.it/400x300"">http://placehold.it/400x300"</a> alt="">
 </a>
 </div>
 <div class="col-lg-3 col-md-4 col-xs-6 thumb">
 <a class="thumbnail" href="#">
 <img class="img-responsive" src="/<a href="http://placehold.it/400x300"">http://placehold.it/400x300"</a> alt="">
 </a>
 </div>
 <div class="col-lg-3 col-md-4 col-xs-6 thumb">
 <a class="thumbnail" href="#">
 <img class="img-responsive" src="/<a href="http://placehold.it/400x300"">http://placehold.it/400x300"</a> alt="">
 </a>
 </div>
 <div class="col-lg-3 col-md-4 col-xs-6 thumb">
 <a class="thumbnail" href="#">
 <img class="img-responsive" src="/<a href="http://placehold.it/400x300"">http://placehold.it/400x300"</a> alt="">
 </a>
 </div>
 <div class="col-lg-3 col-md-4 col-xs-6 thumb">
 <a class="thumbnail" href="#">
 <img class="img-responsive" src="/<a href="http://placehold.it/400x300"">http://placehold.it/400x300"</a> alt="">
 </a>
 </div>
 <div class="col-lg-3 col-md-4 col-xs-6 thumb">
 <a class="thumbnail" href="#">
 <img class="img-responsive" src="/<a href="http://placehold.it/400x300"">http://placehold.it/400x300"</a> alt="">
 </a>
 </div>
 <div class="col-lg-3 col-md-4 col-xs-6 thumb">
 <a class="thumbnail" href="#">
 <img class="img-responsive" src="/<a href="http://placehold.it/400x300"">http://placehold.it/400x300"</a> alt="">
 </a>
 </div>
 <div class="col-lg-3 col-md-4 col-xs-6 thumb">
 <a class="thumbnail" href="#">
 <img class="img-responsive" src="/<a href="http://placehold.it/400x300"">http://placehold.it/400x300"</a> alt="">
 </a>
 </div>
 <div class="col-lg-3 col-md-4 col-xs-6 thumb">
 <a class="thumbnail" href="#">
 <img class="img-responsive" src="/<a href="http://placehold.it/400x300"">http://placehold.it/400x300"</a> alt="">
 </a>
 </div>
 <div class="col-lg-3 col-md-4 col-xs-6 thumb">
 <a class="thumbnail" href="#">
 <img class="img-responsive" src="/<a href="http://placehold.it/400x300"">http://placehold.it/400x300"</a> alt="">
 </a>
 </div>
 </div>
<hr>
<!-- Footer -->
 <footer>
 <div class="row">
 <div class="col-lg-12">
 <p>Copyright © Your Website 2014</p>
 </div>
 </div>
 </footer>
</div>

http://blackrockdigital.github.io/startbootstrap-thumbnail-gallery/