Bootstrap 4 Figures

Ketika ingin menampilkan gambar dalam sebuah halaman HTML dilengkapi dengan judul (caption), sehingga menunjukkan konten yang berdiri sendiri (utuh), kita akan berhadapan dengan istilah figure. Bootstrap menyediakan modifier khusus untuk menangani media figure.

Menyisipkan Gambar Figur

Untuk menyisipkan sebuah gambar yang menunjukkan figur, buatlah/tulis elemen <figure>, kemudian tambahkan nama class .figure. Selanjutnya, pada element <img> tambahkan class .figure-img dan class lain sebagaimana dijelaskan pada Tutorial Bootstrap 4 Images.

Terakhir, tulis <figcaption> dengan tambahan class .figure-caption didalam <figure> element.

Selengkapnya, dapat dilihat contohnya berikut ini:

HTML

editor

<figure class="figure">
  <img src="/media/images/orange.jpg" class="figure-img img-fluid rounded" alt="Buah Jeruk">
  <figcaption class="figure-caption">Jeruk yang menggoda Selera</figcaption>
</figure>

PREVIEW

Aligning Caption
Memposisikan Judul Caption

Jika posisi caption ingin terletak disebelah kanan, tambahkan nama class .text-right seperti contoh berikut:

HTML

editor

<figure class="figure">
  <img src="/media/images/orange.jpg" class="figure-img img-fluid rounded" alt="Buah Jeruk">
  <figcaption class="figure-caption text-right">Jeruk yang menggoda Selera</figcaption>
</figure>

PREVIEW

Keterangan:

img-fluid: adalah class tambahan agar gambar menjadi responsive (Menyesuaikan ukuran layar)

img-rounded: adalah class tambahan untuk menjadikan gambar terlihat tumpul disetiap sisi (pojok) gambar tersebut.