Tutorial Bootstrap 4 #8 : Menampilkan Gambar Dengan Bootstrap 4

Menampilkan Gambar Dengan Bootstrap 4 – Selamat datang kembali di seri tutorial bootstrap 4 di malasngoding.com. Pada tutorial bootstrap 4 bagian ke delapan ini kita akan belajar teknik cara menampilkan gambar dengan bootstrap.

Sebelum mengikuti tutorial ini, pastikan teman-teman sudah bisa atau sudah menguasai cara menampilkan gambar pada HTML.

Baca :

• Cara Menampilkan Gambar Pada HTML
• Cara Menghubungkan HTML dengan Bootstrap 4

Oke langsung saja kita masuk ke cara menampilkan gambar dengan bootstrap.

Menampilkan Gambar Dengan Bootstrap 4

Sebuah website atau aplikasi pasti memiliki gambar yang ditampilkan. tentu gambar tersebut harus diberi sentuhan CSS dulu agar responsive, memiliki bentuk yang sesuai dengan keinginan, atau bahkan mengatur ukuran dari gambar tersebut.

Nah, dengan bootstrap kita tidak lagi perlu menuliskan syntax css secara manual. karena bootstrap sudah menyediakan class-class CSS untuk mengatur gambar.

Dan caranya pun sangat mudah.

Pada tutorial menampilkan gambar Dengan bootstrap ini, kita akan mempelajari beberapa class bootstrap yang bisa kita gunakan untuk mengatur gambar pada website. Diantaranya adalah :

• Membuat gambar menjadi responsive
• Membuat gambar thumbnail
• Mengubah sudut gambar menjadi melengkung ( Round )
• Mengatur posisi gambar ( Alignment )

Langsung saja kita mulai denga pembahasan pertama, tentang menampilkan gambar dengan responsive menggunakan bootstrap.

Namun tunggu dulu, pastikan teman-teman sudah menghubungkan proyek nya dengan bootstrap, dan sudah memiliki file gambar sebagai contoh.

Di tutorial ini saya sudah menyediakan beberapa contoh gambar. dan semua source code contoh tutorial ini bisa teman-teman download di link download paling bawah.

Membuat Gambar Menjadi Responsive

Untuk membuat gambar menjadi responsive, kita bisa menggunakan class .img-fluid dari bootstrap 4.

Letakkan class tersebut pada tag <img> gambar yang ingin dibuat responsive. class img-fluid akan membuat gambar memiliki width 100%, dan height nya menjadi auto.

Sehingga jika dibuka dari device manapun, ukuran gambar tersebut akan tetap konsisten.

menampilkan gambar responsive dengan bootstrap 4

Seperti yang terlihat pada gambar di atas, lebar ukuran gambar memenuhi lebar element sebelumnya yaitu container, karena seperti yang sudah dijelaskan sebelumnya, class img-fluid membuat gambar memiliki width 100%.

Sehingga jika ukuran browser di perkecil, maka ukuran gambar akan tetap konsisten.

Membuat Gambar Thumbnail

Gambar thumbnail di bootstrap berbentuk gambar yang memiliki bingkai putih di pinggirannya. untuk membuat gambar thumbnail dengan bootstrap, kita bisa menggunakan class img-thumbnail.

Karena saya ingin gambarnya tidak terlalu lebar, saya menambahkan atribut width.

Dan berikut hasilnya.

membuat gambar thumbnail dengan bootstrap 4

Membuat Efek Melengkung Pada Gambar Dengan Bootstrap 4

Efek melengkung yang dimaksud adalah memberi efek lengkungan pada sudut gambar. untuk membuat efek lengkungan ini kita bisa menggunakan class rounded.

Hasilnya

membuat lengkungan pada gambar

Seperti yang terlihat pada gambar di atas, dengan menambahkan class rounded milik bootstrap 4 ini, gambar terlihat melengkung pada sudut-sudut nya.

Mengatur Posisi Gambar Dengan Bootstrap 4

Bootstrap juga memungkinkan kita untuk mengatur posisi suatu element atau komponen, misal menempatkan suatu element ke sebelah kiri. atau sebelah kanan.

Untuk menempatkan element ke sebelah kiri, kita bisa menggunakan class float-left. sedangkan untuk menampilkan posisi element ke sebelah kanan, kita bisa gunakan class float-right.

Jika kita lihat hasilnya.

mengatur posisi gambar

Seperti yang terlihat pada gambar di atas, gambar yang kita beri class float-left, menjadi terletak ke paling kiri, dan gambar yang kita beri class float-right terletak ke sebelah paling kanan.

Penutup

Oke selesai sudah pembahasan tentang penggunaan bootstrap pada gambar. berikut ini adalah full source code hasil contoh dari tutorial ini.

Dan berikut demo dan link download nya.

Download Source Code

Jika teman-teman ingin membaca referensi dari bootstrap tentang gambar, bisa baca di sini. terima kasih sudah mengikuti tutorial bootstrap lengkap.