Thumbnail Bootstrap

Thumbnail Bootstrap— компонент Bootstrap, для просмотра небольшого изображения. Вместе с сеткой Bootstrap позволяет отображать сетку изображений, видео, текста или другую информацию. Для оформления картинок предпросмотра (тумбнейлов, thumbnails) подобно формату соц. сети Pinterest, используются сторонние плагины Massonry, Isotop или Salvattore.

Thumbnail Bootstrap

https://youtu.be/T2MvbrPRx6M

Пример кода создания сетки изображений предпросмотра:

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Результат:

Если добавить помимо изображения с ссылкой, заголовок, параграф и кнопки, то у нас получится фрагмент, очень похожий на те, что видим в интернет-магазинах (особенно если добавленные кнопки будут иметь названия «Добавить в корзину» и/или «Сравнить»)

Пример кода содержащего описание изображения или видео:

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Код поможет получить следующий результат: