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>
<img> に align-self-start
, align-self-center
, align-self-end
を指定することで、画像を上寄せ、中央寄せ、下寄せすることができます。
<div class="media"> <img class="mr-3 align-self-end" src="img/64x64.gif" alt="64x64 image"> <div class="media-body"> : </div> </div>
<ul> に .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>