Belajar Bootstrap Part 5 : Bootstrap Gambar

BOOTSTRAP GAMBAR

Assalamu'alaikum Wr. Wb

Hai sobat semua, terima kasih sudah mengunjungi blog saya. Sebelumnya kita sudah belajar mengenai pembuatan tabel menggunakan bootstrap, nah untuk kesempatan kali ini kita akan lanjut ke materi selanjutnya yaitu tentang Gambar pada Bootstrap.

Langsung saja yuk...

ROUNDED CORNERS
Kelas .img-rounded menambahkan sudut dibulatkan ke gambar.
Contoh :

Hasilnya :

LINGKARAN
Kelas .img-circle membentuk gambar menjadi lingkaran.
Contoh :

Hasilnya :

THUMBNAIL 
Kelas .img-thumbnail membentuk gambar menjadi thumbnail.
Contoh :

Hasilnya :

GAMBAR RESPONSIF
Kelas .img-responsive membuat gambar menjadi responsif.
Contoh :

Hasilnya :

GALERI GAMBAR
Contoh :

Hasilnya :

SEMATAN RESPONSIF
Contoh berikut membuat video responsif dengan menambahkan kelas .embed-responsive-item ke tag <iframe> :

Hasilnya :

Silakan dicoba sendiri sobat. Apabila ada pertanyaan silakan tinggalkan jejak dikolom komentar. Terima kasih.

• Kesimpulan

Dengan menggunakan Bootstrap kita bisa mengubah bentuk gambar menjadi lebih menarik dan juga responsif.

Referensi :
http://www.w3schools.com/bootstrap/bootstrap_images.asp

Wassalamu'alaikum Wr. Wb