Belajar Bootstrap #4 Gambar Lengkap

Kali ini kita akan belajar tentang bagaimana menggunakan gambar di bootstrap, ketika menggunakan bootstrap, gambar bisa di modifikasi sedemikian rupa, simak

Kali ini kita akan belajar tentang bagaimana menggunakan gambar di bootstrap lengkap, tentunya kalau HTML biasa gambar ya tetap gambar saja, namun ketika menggunakan bootstrap, gambar bisa di modifikasi sedemikian rupa dengan library yang telah disiapkan oleh bootstrap.

Baik sebelumnya kita telah mengetahui bagaimana membuat form dan tabel di bootstrap.

Baca Juga :
Membuat Form di Bootstrap
Membuat Table di Bootstrap

Dengan membuat form dan tabel tentunya akan semakin mudah mengetahui apa itu bootstrap dan komponen – komponen yang lainnya seperti contoh gambar yang akan kita belajar saat ini.

Belajar Membuat Gambar Pada Bootstrap

Langsung saja untuk penulisan belajar bootstrap gambar codingnya seperti berikut.

Belajar Bootstrap Lengkap Image Shapes

w3schools.com

Baik kita akan mencoba beberapa macam gambar yang telah disediakan librarynya oleh bootstrap, ada Rounded Corners, Circle dan Thumbnail.

Rounded Corners

<img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236"> 

Hasil :

Rounded Corners adalah sebuah gambar yang pada sudutnya terdapat lengkungan, untuk membuat model gambar seperti itu di bootstrap cukup tambahkan class img-rounded pada tag img.

Circle

<img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236">

Hasil :

Yup, dari namanya saja sudah terdengar bahwa circle adalah sebuah bunderan yang agak lonjong, untuk membuat gambar seperti itu kita cukup meambahkan class img-circle pada tag img.

Thumbnail

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 

Hasil :

Thumbnail adalah sejenis gambar yang mempunyai sebuah border dan sedikit jarak, untuk menggunakannya cukup tambah class img-thumbnail pada tag img.

Responsive Images

<img class="img-responsive" src="img_chania.jpg" alt="Chania" width="460" height="345"> 

Hasil :

Ketika di Laptop / PC
Ketika di Mobile / Tablet

Jadi Image Responsive ini untuk mengatur ukuran ketika tampil di mobile / smartphone / tablet, caranya dengan menambahkan class img-responsive pada tag img.

Baik seperti itulah bagaimana kita memodifikasi gambar yang kita punya agar lebih interaktif, tentunya penggunaan tersebut sesuai dengan kebutuhan, misal ketika kita butuh untuk foto profile kita dapat menggunakan circle image pada bootstrap, dan lain sebagainya.

Trimakasih Semoga Bermanfaat 🙂

Default image
Muhammad Bakhtiar
Leave a Reply