メディアオブジェクト:media

mediaブジェクト画像とタイトルと説明のセット:media


タイトル
ここに文章が入ります

  <!-- mediaでflexコンテナになる -->
  <!-- 画像が左に配置される、mr-3でマージンの設定 -->
  <div class="media">
    <img class="mr-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img">
    <div class="media-body">
      <h5>タイトル</h5>
      ここに文章が入ります
    </div>
  </div>

mediaオブジェクト上部に画像を配置:align-self-start


タイトル
ここに文章。。。文章が長い場合であっても対応可能。が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入ります

  <div class="media">
    <!-- アイキャッチなどに利用 -->
    <img class="align-self-start mr-3" alt="" src="https://via.placeholder.com/120x120/FFFF00/000000?text=img">
    <div class="media-body">
      <h5>タイトル</h5>
      ここに文章。。。文章が長い場合であっても対応可能。が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入りますここに文章が入ります
    </div>
  </div>

mediaオブジェクト画像の配置を変える:order-*


タイトル
HTMLの構造上、画像を先に、メディア本文を後に記述していますが、order-*クラスを使用して表示上の順序を入れ替えています。

  <!-- order-1とorder-2を使う -->
  <div class="media">
    <img class="order-2 ml-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img">
    <div class="media-body order-1">
      <h5>タイトル</h5>
      HTMLの構造上、画像を先に、メディア本文を後に記述していますが、order-*クラスを使用して表示上の順序を入れ替えています。
    </div>
  </div>

mediaオブジェクトの入れ子:media


タイトル
ここに文章。。。
子のタイトル
ここに文章。。。

  <div class="media">
    <img class="mr-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img">
    <div class="media-body">
      <h5>タイトル</h5>
      ここに文章。。。
      <!-- media-bodyの中にさらにmedia -->
      <div class="media mt-3">
        <a href="#"><img class="mr-3" alt="" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img"></a>
        <div class="media-body">
          <h5>子のタイトル</h5>
          ここに文章。。。
        </div>
      </div>
    </div>
  </div>

mediaオブジェクトのliリスト:mediaとmedia-body


  • タイトル
    ここに文章。。。
  • タイトル
    ここに文章。。。

  <!-- マーカなし -->
  <ul class="list-unstyled">
      <!-- liタグにmdiaを設定することもできる、リストで表示したい場合に便利 -->
    <li class="media mb-4">
      <img class="mr-3" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img" alt="">
      <div class="media-body">
        <h5>タイトル</h5>
        ここに文章。。。
      </div>
    </li>
    <li class="media mb-4">
      <img class="mr-3" src="https://via.placeholder.com/60x60/FFFF00/000000?text=img" alt="">
      <div class="media-body">
        <h5>タイトル</h5>
        ここに文章。。。
      </div>
    </li>
  </ul>