Figures
関連画像とテキストを表示する例です。
任意のキャプションでコンテンツを表示する必要があるときは, <figure> の使用を検討してください。
.figure , .figure-img , .figure-caption クラスを使用して,
HTML5の <figure> , <figcaption> 要素にいくつかのベースラインスタイルを提供します。
figureの画像サイズはサンプルのように .img-fluid クラスを <img> に追加して変更します。
<figure class="figure">
<svg class="bd-placeholder-img figure-img img-fluid rounded" width="400" height="300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 400x300"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"/><text fill="#dee2e6" dy=".3em" x="50%" y="50%">400x300</text></svg>
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>text utilities を利用すると, 位置の変更が簡単にできます。
<figure class="figure">
<svg class="bd-placeholder-img figure-img img-fluid rounded" width="400" height="300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 400x300"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"/><text fill="#dee2e6" dy=".3em" x="50%" y="50%">400x300</text></svg>
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>v4.2