Tutorial Bootstrap 4 #10 : Membuat Figure Pada Bootstrap 4

Membuat Figure Bootstrap 4 – Pada tutorial bootstrap versi 4 bagian ke sepuluh ini kita akan belajar tentang penerapan class bootstrap pada elemen figure.

Seperti yang sudah teman-teman pelajari pada materi HTML 5. Figure merupakan elemen HTML yang berguna untuk menggabungkan elemen HTML seperti gambar, diagram, listing kode program dan lainnya.

Membuat Figure Bootstrap 4

Tag <figure> .. </figure> biasanya digunakan untuk menyisipkan elemen yang disebutkan di atas tadi, dengan menggabungkan dengan caption dari file tersebut.

Berikut ini adalah contoh penggunaan dan penulisan tag figure. kita buat contoh dengan menerapkan gambar pada tag figure.

Kita akan mencoba menerapkan class-class bootstrap 4 pada tag figure di atas.

Contoh Elemen Figure Menggunakan Bootstrap 4

Bootstrap telah menyediakan beberapa class yang bisa kita terapkan pada elemen <figure> .. </figure>, yaitu :

• .figure
  Tulis class .figure pada tag pembuka <figure>. misalnya <figure class=’figure’>.
• .figure-img
  Class .figure-img adalah class yang bisa kita terapkan pada element gambar atau <img>. contohnya <img class=’figure-img’ src=”>.
• .figure-caption
  Class figure-caption adalah class yang bisa kita terapkan pada bagian caption figure. atau pada tag <figcaption>. contohnya <figcaption class=’figure-caption’>.

Sehingga jika kita terapkan class di atas ke elemen <figure> .. </figure>, maka akan menjadi seperti contoh berikut.

Perhatikan pada contoh di atas, pada tag pembuka <figure> kita tuliskan class .figure, kemudian pada elemen gambar (tag <img>) kita tulis class .figure-img, dan terakhir pada tag pembuka <figcaption>, kita berikan class .figure-caption.

Oh ya, di contoh ini saya sudah menyiapkan sebuah gambar dengan nama gambar1.jpg, seperti yang terlihat pada contoh di atas.

Berikut ini source code full nya

figure.html

dan coba kita jalankan pada browser untuk melihat hasilnya.

membuat figure dengan bootstrap 4

Sekarang gambar sudah tampil dengan rapi, dan memiliki caption yang rapi juga dibagian bawahnya.

Perhatikan pada elemen gambar atau pada tag <img> di atas, di sana kita juga menambahkan class .img-fluid dan class .rounded.

Tentu teman-teman sudah mengetahui kegunaan dari class .img-fluid dan class .rounded. karena sudah kita bahas pada tutorial menampilkan gambar dengan bootstrap 4 pada tutorial sebelumnya.

Silahkan teman-teman bereksperimen sendiri dengan menggunakan class-class bootstrap 4 yang sudah kita pelajari pada tutorial sebelumnya.

Memindahkan Caption Ke Kanan

Jika teman-teman ingin tulisan caption nya berada di sebelah kanan, teman-teman bisa menambahkan class .text-right pada bagian tag <figcaption>.

Misalnya

Oke selesai sudah materi tentang penggunaaan bootstrap pada elemen figure. pada tutorial bootstrap 4 selanjutnya kita akan membahas tentang komponen-komponen website yang bisa kita buat menggunakan bootstrap 4.

Download Source Code