Figures

Bootstrapのfigureコンポーネントで関連画像やテキストを表示するためのドキュメントとサンプルです。

項目

オプションのキャプション付き画像のように、コンテンツの一部を表示する必要がある場合は、<figure>を使用することを検討してください。

含まれている.figure、.figure-imgおよび.figure-captionクラスを使用して、HTML5<figure>および<figcaption>要素のベースラインスタイルをいくつか提供します。図のイメージには明示的なサイズがないため、応答性を高めるために、.img-fluidクラスを<img>に追加してください。

A caption for the above image.

html

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

テキストユーティリティを利用すると、位置の変更が簡単にできます。

A caption for the above image.

html

<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>

CSS

Sass変数

scss/_variables.scss

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              var(--#{$prefix}secondary-color);