Figures

関連画像とテキストを表示する例です。

任意のキャプションでコンテンツを表示する必要があるときは, <figure> の使用を検討してください。

.figure , .figure-img , .figure-caption クラスを使用して, HTML5の <figure> , <figcaption> 要素にいくつかのベースラインスタイルを提供します。 figureの画像サイズはサンプルのように .img-fluid クラスを <img> に追加して変更します。

Placeholder400x300
A caption for the above image.
<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 を利用すると, 位置の変更が簡単にできます。

Placeholder400x300
A caption for the above image.
<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