Menggunakan Fitur Image dengan Bootstrap

Dalam bootstrap images terdapat beberapa macam bentuk atau gaya imga asli dari bawaan bootstrap, kita tahu bahwa penggunakan ini sangat mudah sekalipun yang kurang memahaminya, tetapi disini saya akan membahas dengan fitur bawaan dari framework bootstrap tersebut.

Untuk bentuk tersebut dengan class .img-rounded, .img-circle, dan .img-thumbnail.dari masing-masing tersebut pastinya memiliki gaya tersendiri.

Rounded

Dalam class .img-rounded akan terlihat disetiap sisinya dengan garis atau sudut melengkung, maka itu dinamakan rounded. Contohnya...

<img src="img/CS.png" class="img-rounded" width="200px">

Circle

Pada class .img-circle lengkungan sikunya akan lebih banyak, maka akan nampak lingkaran. Conotohnya...

<img src="img/CS.png" class="img-circle" width="200px">

Thumbnail

Pada class.img-thumbnail akan seperti class .img-rounded namun memiliki padding dengan border mengelilingi. Contohnya...

<img src="img/CS.png" class="img-thumbnail" width="200px">

 

Responsive 

Pada class .img-responsive ini sama halnya seperti contoh diatas tetapi ketika dilihat pada layar kecil maka image tersebut akan menyesuaikan.