Contoh dan Cara Penggunaan Gambar pada Bootstrap

Contoh dan Cara Penggunaan Gambar pada Bootstrap

Contoh dan Cara Penggunaan Gambar pada Bootstrap. Pernahkah kalian memasukkan suatu gambar ke file HTML lalu ukuran gambar tersebut tidak sesuai? Di dalam Bootstrap, ada class yang memungkinkan kita mengatur gambar tersebut.

Baca juga: Membuat Tabel pada Bootstrap.

Contoh dan Cara Penggunaan Gambar pada Bootstrap

Apa yang dimaksud responsive? Responsive adalah tampilan yang optimal dalam berbagai perangkat, baik mobile maupun desktop. Lalu bagaimana kita mengatur gambar agar responsive? Berikut akan saya jelaskan tentang class gambar pada Bootstrap.

.img-thumbnail

Class .img-thumbnail adalah class yang mengatur gambar thumbnail (memiliki border). Buat file HTML dan pastekan code berikut,
[html]

[/html]
Hasilnya akan menjadi seperti ini,

Contoh dan Cara Penggunaan Gambar pada Bootstrap

.rounded

Class ini menambahkan sudut membulat pada gambar.
[html]


[/html]

.rounded-circle

Sedikit berbeda namun sering dipakai, class ini menjadikan gambar kita bulat. Biasanya dipakai untuk thumbnail foto profil.
[html]


[/html]

.float-right dan .float-left

Kedua tag ini bisa kita gunakan untuk menyelaraskan gambar.

See the Pen Float Images Bootstrap | codelatte.id by Abay (@abaykan) on CodePen.

.mx-auto dan .d-block

Class ini bermaksud (margin:auto) dan (display:block) yang kita pakai untuk membuat gambar berada di tengah.
[html]


[/html]

.img-fluid

Class ini secara otomatis menyesuaikan agar sesuai dengan ukuran layar (responsive).
[html]


[/html]

Jika masih ada yang kurang paham, silahkan tinggalkan komentar dibawah. Sekian artikel kali ini, semoga bermanfaat dan sampai jumpa pada artikel berikutnya!