Source

数字

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

オプションのキャプション付きの画像など、コンテンツを表示する必要がある場合はいつでも、<figure>.

含まれている および クラスを使用して.figure、.figure-imgHTML5および要素.figure-captionのベースライン スタイルを提供します。図の画像には明示的なサイズがないため、必ずクラスをに追加してレスポンシブにします。<figure><figcaption>.img-fluid<img>

400×300
上の画像のキャプション。 
<figure class="figure">
  <img src=".../400x300" 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>

テキスト ユーティリティを使用すると、図のキャプションを簡単に揃えることができます。

400×300
上の画像のキャプション。 
<figure class="figure">
  <img src=".../400x300" 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>