Figures
関連画像とテキストを表示する例です。
任意のキャプションでコンテンツを表示する必要があるときは, <figure> の使用を検討してください。
.figure , .figure-img , .figure-caption クラスを使用して,
HTML5の <figure> , <figcaption> 要素にいくつかのベースラインスタイルを提供します。
figureの画像サイズはサンプルのように .img-fluid クラスを <img> に追加して変更します。
<figure class="figure">
<img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>text utilities を利用すると, 位置の変更が簡単にできます。
<figure class="figure">
<img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>