Menampilkan Gambar Menggunakan Bootstrap

lebakcyber.net – Menampilkan gambar menggunakan Bootstrap. Oke jadi pada kesempatan kali ini kita akan membahas mengenai bagaimana cara untuk menampilkan sebuah gambar agar terlihat lebih menarik dengan menggunakan Bootstrap.

Dengan memakai Bootstrap kita bisa menampilkan gambar dengan bentuk lingkaran, melengkung pada sisi-sisi sudutnya, menampilkan gambar thumbnail dan juga gambar responsive.

Pada Bootstrap sendiri sudah disedikan class yang dapat digunakan untuk mengatur gambar pada saat ditampilkan sesuai dengan yang kita inginkan, contohnya seperti menampilkan gambar dengan bentuk lingkaran, rounder, dan juga gambar responsive. Adapun beberapa class yang ada pada bootstrap yang bisa dipakai untuk menampilkan gambar pada halaman HTML yang dibuat :

.img-thumbnail = Dapat digunakan untuk menampilkan gambar dengan bentuk thumbnail.
.img-rounded = Dapat digunakan untuk menampilkan gambar dengan bentuk round pada tiap sisi sudut gamabr dengan bentuk melengkung.
.img-responsive = Dapat digunakan untuk menampilkan gambar menjadi responsive pada saat dijalankan untuk semua ukuran resolusi
.img-circle = Dapat digunakan untuk menampilkan sebuah gambar dalam bentuk lingkaran.

Sekarang kita coba praktekan bagaimana cara menampilkan gambar dengan menggunakan Bootstrap satu per satu ok.

Gambar Berbentuk Circle Dengan Bootstrap

Untuk menampilkan gambar dengan bentuk lingkaran menggunakan Bootstrap kita harus menggunakan class img-circle. Silahkan buat sebuah file index.html lalu masukan perintah dibawah ini :

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Menampilkan Gambar Berbentuk Lingkaran / Circle</title>
  <link rel="stylesheet" 
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <h3>Gambar Circle Menggunakan Bootstrap - Lebakcyber.net</h3>
    <img src="lebakcyber.jpg" class="img-circle" alt="Lebak Cyber" width="350" height="250">
</body>
</html>

Perhatikan pada bagian gambar kita menambahkan class=”img-circle” agar gambar yang ditampilkan berbentuk bulat dan hasilnya seperti gambar dibawah ini :

Gambar Berbentuk Thumbnail Dengan Bootstrap

Sekarang kita akan mencoba untuk menampilkan gambar dengan bentuk thumbnail, silahkan buat file index.html lalu masukan perintah dibawah ini :

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Menampilkan Gambar Berbentuk Lingkaran / Circle</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <h3>Gambar thumbnail Menggunakan Bootstrap - Lebakcyber.net</h3>
    <img src="lebakcyber.jpg" class="img-thumbnail" alt="Lebak Cyber" width="350" height="250">
</body>
</html>

Perhatikan pada bagian gambar kita menambahkan class=”img-thumbnail” agar gambar yang ditampilkan berbentuk thumbnail. Nanti hasilnya seperti gambar dibawah ini :

Gambar Berbentuk Rounded Dengan Bootstrap

Untuk menampilkan sebuah gambar berbentuk rounded dengan memakai Bootstrap silahkan buat sebuah file index.html lalu masukan perintah dibawah ini :

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Menampilkan Gambar Berbentuk Lingkaran / Circle</title>
  <link rel="stylesheet" 
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <h3>Gambar rounded Menggunakan Bootstrap - Lebakcyber.net</h3>
  <img src="lebakcyber.jpg" class="img-rounded" alt="Lebak Cyber" width="350" height="250">
</body>
</html>

Perhatikan pada bagian gambar kita menambahkan class=”img-rounded” agar gambar yang ditampilkan berbentuk rounded, nanti hasilnya akan seperti gambar dibawah ini :

Gambar Responsive Menggunakan Bootstrap

Sekarang kita akan mencoba menampilkan gambar responsive, silahkan buat file index.html lalu masukan perintah dibawah ini :

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Menampilkan Gambar Berbentuk Lingkaran / Circle</title>
  <link rel="stylesheet" 
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <h3>Gambar Responsive Menggunakan Bootstrap - Lebakcyber.net</h3>
  <img src="lebakcyber.jpg" class="img-responsive" alt="Lebak Cyber" width="350" height="250">
</body>
</html>

Pada bagian gambar kita menambahkan class=”img-responsive” agar gambar yang ditampilkan bersifat responsive. Nanti hasilnya seperti gambar dibawah ini :

Oke jadi seperti itulah beberapa cara yang bisa digunakan untuk menampilkan gambar dengan memakai Bootstrap. Semoga tutorial sederhana ini dapat bermanfaat dan sampai jumpa di tutorial belajar Bootstrap lainnya ya.

Lebak Cyber Tips dan Trik Komputer

Menampilkan Gambar Menggunakan Bootstrap