Bootstrap 框架提供了畫像（figure）組件，通過 Bootstrap 的畫像組件來顯示相關聯的圖片和文本。本教程包含了畫像組件的說明和相關示例。

一、顯示圖片標題

任何時候需要顯示一段內容（例如帶有可選標題的圖片），請使用 <figure> 標簽。

.figure、.figure-img 和 .figure-caption 類為 HTML5 的 <figure> 和 <figcaption> 元素提供了一些基本樣式。<figure> 標簽內所包含的圖片如果沒有明確地設置尺寸的話，請務必為 <img>標簽添加 .img-fluid 類，使其支持響應式布局。

<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

二、文本對齊

通過使用 Bootstrap 提供的文本工具類可以輕松對齊 <figure> 所包含的標題。

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