Figures (図)

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

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

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

A caption for the above image.

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

text utilities を利用すると, 位置の変更が簡単にできます。

A caption for the above image.

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>

Sass

Variables

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              $gray-600;