Tutorial Bootstrap Part 5 : Menampilkan Gambar Dengan Bootstrap

Assalamu'alaikum Wr. Wb.

A). Pendahuluan 

      Bertemu lagi diblog TONI | BLC Telkom. Pada kesempatan kali ini saya akan membagikan / sharing tentang Menampilkan Gambar dengan Bootstrap.

B). Latar Belakang 

       Menampilkan gambar di Bootstrap

C). Maksud dan Tujuan

      Penampilan Gambar yang responsive, berbentuk unik untuk mencocokkan bentuk gambar dengan template website yang teman" buat.

D). Pembahasan

       Class mengatur gambar di Bootstrap dan Kegunaannya.

1. rounded           = Membuat gambar tepi gambar menjadi tumpul / istilahnya menggunakan border-radius.
2. .img-thumbnail = Membuat gambar menjadi thumbnail.

Berikut ini akan saya buatkan contoh pemakaian dari setiap class untuk mengatur gambar di bootstrap :

1. Mengatur gambar dengan menggunakan .img-thumbnail

     Untuk scriptnya bisa lihat gambar dan hasil scriptnya di bawah ini.

       Hasil Script:

Untuk menggunakan class thumbnail, sobat bisa tambahkan atribut class="img-thumbnail".

2. Mengatur gambar menggunakan .rounded

        Hasil Script:

E). Kesimpulan
       Nah, pada Bootstrap 4 ini kita bisa menggunakan kedua class tersebut yaitu .img-thumbnail & rounded. Namun, di Bootstrap 4 sudah menghilangkan class .img-responsive, .img-circle, sekarang bootstrap 4 hanya memakai dua class yang di sediakan di Bootstrap 4.

Cukup sekian informasi yang dapat saya berikan pada hari ini, jika ada kesalahan mohon maaf semuanya. Terimakasih telah mengunjungi blog saya dan jangan lupa untuk mengikuti dan membaca selalu postingan di blog saya yang saat ini masih biasa-biasa saja.

  ~ Wassalamu'alaikum Wr. Wb. ~