レスポンシブ画像：img

レスポンシブ画像：img-fluid


  <img src="https://via.placeholder.com/710x250/FFFF00/000000?text=img" class="img-fluid" alt="レスポンシブ画像">

画像の中央寄せ：mx-autoとd-block


  <!-- imgにclassを設定する -->
  <img src="https://via.placeholder.com/200x200" class="mx-auto d-block" alt="中央寄せ画像">

画像の中央寄せ：text-center


  <!-- divにclassを設定する -->
  <div class="text-center">
    <img src="https://via.placeholder.com/200x200" alt="中央寄せ画像">
  </div>

サムネイル画像：img-thumbnail


  <!-- imgにclassを設定する -->
  <img src="https://via.placeholder.com/200x200" class="img-thumbnail" alt="サムネイル画像">

ジャンボトロン：jumbotron

Jumbotron

これはジャンボトロンのサンプルです。


  <!-- ジャンボトロンは、大型表示で、トップ見出しなどに使う用語 -->
  <div class="jumbotron">
    <h4 class="display-3">Jumbotron</h4>
    <p class="lead">これはジャンボトロンのサンプルです。</p>
  </div>

ジャンボトロンを全幅で表示する：jumbotron-fluid

Fluid jumbotron

これは全幅のジャンボトロンのサンプルです。


  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h4 class="display-3">Fluid jumbotron</h4>
      <p class="lead">これは全幅のジャンボトロンのサンプルです。</p>
    </div>
  </div>