GitHub で表示

図形

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

画像にキャプションを付けたいなど、コンテンツを表示する必要があるときはいつでも <figure> の利用を検討してください。

記載されている .figure 、 .figure-img 、 .figure-caption クラスを使用すれば、HTML5 の <figure> と <figcaption> 要素のベースラインスタイルを提供できます。図形内の画像は明示的なサイズを持たないので、 <img> に .img-fluid クラスを追加して反応型にする必要があります。

Placeholder400x300
上の画像のキャプション。
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

図形のキャプションの配置は、 テキストユーティリティ で簡単に行えます。

Placeholder400x300
上の画像のキャプション。
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>