Menampilkan gambar dengan Bootstrap

Ditulis Oleh:
menampilkan gambar pada bootstrap

Menampilkan gambar dengan bootstrap sebenarnya sama dengan kita menggunakan html. Hanya yang menjadi perbedaan ada pada style-nya. Jika kita menampilkan gambar hanya menggunakan html, maka tentu saja tampilannya hanya basic tanpa ada style didalamnya. Sehingga terlihat jelek dan tidak menarik untuk ditampilkan dihalaman web kita.

Baca juga:

Sebenarnya kita dapat menampilkan gambar dengan html dikombinasikan dengan css. Namun saat ini banyak yang tidak begitu menguasai css. Sehingga solusi yang paling tepat yaitu memakai bootstrap. Karena dengan bootstrap kita dapat menampilkan gambar pada halaman web dengan berbagai jenis style yang dapat kita pilih sesuai keinginan kita.

3 Bentuk gambar pada Bootstrap

2 bentuk gambar yang dapat dibuat dengan bootstrap

Berikut ini saya jabarkan masing-masing bentuk tersebut:

1. Rounded

class image jenis ini akan membentuk gambar persegi dengan bentuk bulat/melengkung pada setiap sudutnya. Syntax untuk membuat gambar dengan tipe ini dengan menggunakan class rounded

 <img src="pantai.png" class="rounded" alt="Pantai">

2. Rounded Circle

Class image jenis ini akan membentuk gambar menjadi bulat. Untuk membuat gambar dengan jenis ini menggunakan class rounded-circle

 <img src="pantai.png" class="rounded-circle" alt="Pantai">

3. Thumbnail

Class image jenis ini akan membentuk gambar thumbnail. Menggunakannya cukup menggnakan class img-thumbnail

 <img src="pantai.png" class="img-thumbnail" alt="Pantai">

Mengatur Posisi gambar dengan Bootstrap

Kita dapat mengatur posisi gambar pada halaman web kita dengan menggunakan bootstrap. Terdapat tiga posisi yang dapat kita atur yaitu:

  • Rata kiri menggunakan class = float-left
  • Rata kanan menggunakan class = float-right
  • Tepat ditengah menggunakan class = mx-auto d-block

Contoh:

<!DOCTYPE html>
<html>
<head>
 <!-- Load file CSS Bootstrap offline -->
<link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class='container'>
 <img src="pantai.png" class=" float-left" alt="Pantai">
  <img src="pantai.png" class=" float-right" alt="Pantai">
 <img src="pantai.png" class="mx-auto d-block" alt="Pantai">
 </div>
</body>
</html> 

Hasil Output:

mengatur posisi gambar di bootstrap

Membuat Gambar Responsive

Dengan menggunakan gambar responsive maka secara otomatis gambar tersebut akan menyesuaikan dengan ukuran layar. Untuk membuat gambar responsive cukup dengan menambahkan class img-fluid kedalam tag image, class ini akan men-set gambar dengan lebar maksimal 100% dan tinggi otomatis. Contoh membuat gambar responsive seperti dibawah ini:

 <img src="pantai.png" class="img-fluid" alt="Pantai">

Kesimpulan

Sekian pembahasan singkat mengenai pengelolaan gambar dengan bootstrap. dapat saya ambil kesimpulan bahwa dengan bootstrap kita dapat membuat bentuk-bentuk gambar secara umum dengan mudah dan kita juga dapat mengatur posisi/ letak gambar tanpa harus mengotak-atik css. Cukup dengan pamanggilan class kita sudah bisa melakukannya. Apalagi terdapat support gambar responsive yang akan membuat tampilan gambar kita akan otomatis menyesuaikan dengan ukuran layar perangkat yang mengaksesnya. Baiklah sekian kalau begitu silahkan anda bisa bertanya lewat kolom komentar dibawah jika ada pertanyaan terkait pembahasan diatas.