Setelah sebelumnya saya memposting cara membuat dan menesain table menggunakan bootstrap, kali ini saya akan berbagi ilmu cara membuat tampilan gambar yang menarik dengan bootstrap.
Dengan menggunakan bootstrap membuat gambar dengan sudutnya melengkung, gambar dengan berbentuk lingkaran, gambar thumbnail dan gambar responsive sangat mudah.
Karena bootstrap menyediakan class untuk mengatur gambar maka kita akan mudah untuk mengatur gambar sesuai keinginan kita. Misalnya, Anda ingin membuat gambar dengan berbentuk rounder, circle dan responsive sangat mudah dengan bootstrap.
Berikut beberapa class dalam bootstrap yang sering digunakan untuk memanipulasi tampilan gambar.
1. Membuat gambar thumbnail dengan bootstrap (class img-thumbnail)
Class ini berfungsi untuk menampilkan gambar thumbnail. Dengan menggunakan class ini gambar kita akan lebih cantik dari biasanya.
Untuk membuat gambar thumbnail caranya sangat mudah, Anda hanya tinggal memasukan class img-thumbnail pada tag img. Contoh:
Skrip diatas akan menghasilkan tampilan gambar seperti berikut
Bagus kan?
Dari skrip diatas dapat dilihat bahwa untuk membuat gambar thumbnail adalah:
img src="luffy.png" class="img-thumbnail" alt="Gambar Luffy" width="500" height="400"
2. Membuat gambar circle dengan bootstrap (class img-circle)
Seperti namanya, class ini berfungsi untuk membuat tampilan gambar menjadi berbentuk lingkaran.
Penggunaan class ini sama seperti class img-thumbnail. Anda hanya perlu menambahkan class img-circle pada tag img. Perhatikan contoh berikut.
Jika di run di browser hasilnya seperti berikut
Skrip berikut ini yang membuat gambar tersebut menjadi bentuk lingkaran:
img src="luffy.png" class="img-circle" alt="Gambar Luffy" width="500" height="400"
3. Membuat gambar rounded corner dengan bootstrap (class img-rounded)
Untuk membuat gambar yang sudutnya berbentuk melengkung kita dapat menggunakan class img-rounded.
Seperti halnya class img-thumbnail dan class img-circle, class ini disimpan pada tag img untuk penggunaannya. Seperti contoh erikut ini
Skrip diatas akan menghasilkan tampilan seperti berikut:
Terlihat bahwa skrip untuk menghasilkan gambar yang sudutnya melengkung adalah:
img src="luffy.png" class="img-rounded" alt="Gambar Luffy" width="500" height="400"
4. Membuat gambar responsive dengan bootstrap (class img-responsive)
Class ini berfungsi untuk membuat gambar menjadi menyesuaikan secara otomatis dengan layar yang berbeda dan reolusi yang berbeda saat dijalankan.
Untuk membuat tampilan gambar menjadi responsive menggunakan bootstrap caranya sangat mudah. Anda hanya perlu menambahkan class img-responsive pada tag img. Contoh:
Hasil dari skrip diatas akan terlihat seperti berikut ini.
Berikut skrip yang membuat gambar menjadi responsive
img src="luffy.png" class="img-responsive" alt="Gambar Luffy" width="500" height="400"
 Bagaimana? Hasilnya bagus – bagus bukan?
Itulah kelebihan dari bootstrap, salah satunya dalam memenipulasi gambar. Kita tidak perlu repot – repot dengan css jika ingin membuat gambar lingkaran atau responsive. Kita hanya cukup memanggil class yang ada pada bootstrap untuk membuat gambar yang terlihat menarik.
Sekian artikel tutorial ini saya buat, mudah – mudahan bermanfaat da selamat mencoba!
