画像

.img-responsiveをつけることで、親要素に対して100%の幅になります。画像のキャプションには、.img-captionを付加します。

<img src="images/guideline/photoswipe_sample01.png" class="img-responsive">
<div class="img-caption">さばくに、ひとはいない</div>

.thumbnailで画像とキャプションを囲みます。サムネイルから画像ビューワーで拡大表示することもできます。

<div class="thumbnail-wrap text-center">
  <div class="thumbnail image__thumbnail">
    <a href="#fakelink"><img src="images/guideline/photoswipe_sample01_sm.png" alt=""></a>
    <div class="text-center img-caption">さばくに、ひとはいない</div>
  </div>
  <div class="thumbnail image__thumbnail">
    <a href="#fakelink"><img src="images/guideline/photoswipe_sample02_sm.png" alt=""></a>
    <div class="text-center img-caption">ヒツジは目に入ったものみんな食べるよ</div>
  </div>
  <div class="thumbnail image__thumbnail mrn">
    <a href="#fakelink"><img src="images/guideline/photoswipe_sample03_sm.png" alt=""></a>
    <div class="text-center img-caption">とぶんだ。ひこうきだよ</div>
  </div>
</div>