Skip to main content Skip to docs navigation
View on GitHub

Figures (図)

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

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

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

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

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