Source

Angka

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

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.

400x300
Caption untuk gambar di atas.
<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>

Menyelaraskan keterangan gambar itu mudah dengan utilitas teks kami .

400x300
Caption untuk gambar di atas.
<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>