Bootstrapでサムネイルを作成する

Bootstrapで比較的簡単にサムネイルを作ることができます。
参考ページ：Thumbnails

imgタグを囲んだaタグ（リンクなしのときdiv）のclassに”thumbnail”を設定するとサムネイル風の表示になります。サイズの設定は、divタグのclassにデバイスの合わせて（col-xs-数字、col-md-数字、col-sm-数字）設定します。

※サムネイル画像をいくつか並べて表示するようなときは、<div class=”row”></div>の中に下のコードを記述します。

グリッド（col-md-、col-xs-）：Grid option

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

サムネイル画像と文章を一緒に表示したいときは、<div class=”thumbnail”>の子要素で<div class=”caption”>を追加します。

<div class="col-sm-6 col-md-3">
    <div class="thumbnail">
      <img src="画像.png" alt="">
      <div class="caption">
        <h3>○○ラーメン</h3>
        <p>ラーメン・・・・・・・・・・美味かった</p>
      </div>
    </div>
 </div>