図形

Figures

Bootstrapの図形コンポーネントを使用して、関連するイメージとテキストを表示するためのドキュメントと例。

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

HTML5<figure>と<figcaption>要素のために、いくつかの基準スタイルを提供するために、含まれる.figure、.figure-imgと.figure-captionクラスを使用します。図形の画像は、明示的な大きさを持っていません。それをレスポンシブで作成するために、確実に、あなたの<img>に、.img-fluidクラスを追加して下さい。

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

テキスト・ユーティリティで、図形のキャプションを簡単に整列させることができます。

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>