メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

図表(Figures) v4.0.0新設

関連する画像とテキストをBootstrapに表示するための解説と例。

図表の設定

任意のキャプションでイメージのようなコンテンツを表示する必要があるときは、いつでも <figure> の使用を検討すること。

.figure, .figure-img, .figure-caption を使用して、HTML5の <figure> 要素や <figcaption> 要素に基本的なスタイルを提供する。figure内のイメージには明示的なサイズがないので、レスポンシブに対応するには、<img>.img-fluid を追加すること。

見本
プレースホルダ400x300
上の画像のキャプション
設定例
<figure class="figure">
	<img src="..." class="figure-img img-fluid rounded" alt="一般的な角丸イメージ">
	<figcaption class="figure-caption">上の画像のキャプション</figcaption>
</figure>

【設定】

  • <figure>.figure, <img>.figure-img, <figcaption>.figure-caption を入れる

キャプションの配置

Figureのキャプションをテキストユーティリティで簡単に整列させることが可能。

見本
プレースホルダ400x300
上の画像のキャプション
設定例
<figure class="figure">
	<img src="..." class="figure-img img-fluid rounded" alt="一般的な角丸イメージ">
	<figcaption class="figure-caption text-right">上の画像のキャプション</figcaption>
</figure>

【設定】