とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. メディアオブジェクト

メディアオブジェクト

.media および .media-body を用いて、画像と説明を下記の様に配置することができます。

<div class="media">
  <img class="mr-3" src="img/64x64.gif" alt="64x64 image">
  <div class="media-body">
    <h5 class="mt-0">HTML 5.2</h5>
    This specification defines the 5th major version,
    second minor revision of the core language of the
    World Wide Web: the Hypertext Markup Language (HTML).
    In this version, new features continue...
  </div>
</div>

上下のアライン

.align-self-* を用いて、画像を上寄せ(start)、中央寄せ(center)、下寄せ(end)することができます。

<div class="media">
  <img class="mr-3 align-self-end" src="img/64x64.gif" alt="64x64 image">
  <div class="media-body">
    :
  </div>
</div>

メディアリスト

<li> に .media を用いて、メディアリストを表示することができます。

<ul class="list-unstyled" style="width:500px">
  <li class="media mb-3">
    <img src="64x564.gif" alt="64x64" class="mr-3">
    <div class="media-body">
      <h5>HTML 5.2</h5>
      This specification defines the 5th major version,
      second minor revision of the core language of the
      World Wide Web: the Hypertext Markup Language (HTML).
      In this version, new features continue...
    </div>
  </li>
     :
</ul>