Contoh dan Cara Penggunaan Gambar pada Bootstrap

Cara Menggunakan Bootstrap
4.5/5 (2)
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,

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Panggil Bootstrap nya disini -->
</head>
<body>
<div class="container">
<h3>Contoh dan Cara Penggunaan Gambar pada Bootstrap | codelatte.org</h3>
Class <code>.img-thumbnail</code> adalah class yang mengatur gambar thumbnail (memiliki border).
<img class="img-thumbnail" src="pic.png" alt="Logo Codelatte"/>
</div>
</body>
</html>

Hasilnya akan menjadi seperti ini,

Contoh dan Cara Penggunaan Gambar pada Bootstrap
Contoh dan Cara Penggunaan Gambar pada Bootstrap

.rounded

Class ini menambahkan sudut membulat pada gambar.

<!-- Contoh Penggunaan -->
<img class="img rounded" src="namagambar.jpg" alt="Codelatte" />

.rounded-circle

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

<!-- Contoh Penggunaan -->
<img class="img rounded-circle" src="namagambar.jpg" alt="Codelatte" />

.float-right dan .float-left

Kedua tag ini bisa kita gunakan untuk menyelaraskan gambar.

See the Pen Float Images Bootstrap | codelatte.org 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.

<!-- Contoh Penggunaan -->
<img class="img mx-auto d-block" src="namagambar.jpg" alt="Codelatte" />

.img-fluid

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

<!-- Contoh Penggunaan -->
<img class="img-fluid" src="namagambar.jpg" alt="Codelatte" />

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

Please rate this

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *