Angka

Dokumentasi dan contoh untuk menampilkan gambar dan teks terkait dengan komponen gambar di Bootstrap.

Di halaman ini

Kapan pun Anda perlu menampilkan konten—seperti gambar dengan teks opsional, pertimbangkan untuk menggunakan <figure>.

Gunakan kelas yang disertakan .figure, .figure-imgdan .figure-captionuntuk menyediakan beberapa gaya dasar untuk HTML5 <figure>dan <figcaption>elemen. Gambar dalam gambar tidak memiliki ukuran eksplisit, jadi pastikan untuk menambahkan .img-fluidkelas ke Anda <img>agar responsif.

Caption untuk gambar di atas.

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

Menyelaraskan keterangan gambar itu mudah dengan utilitas teks kami .

Caption untuk gambar di atas.

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

Kelancangan

Variabel

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              $gray-600;