Tutorial Bootstrap Part 3- Cara Menampilkan gambar dengan bootstrap

By | November 6, 2021

Hallo apakabar teman-teman, di postingan kali ini saya akan berbagi tutorial cara menampilkan gambar dengan bootstrap, Menampilkan gambar dengan bootstrap sebenarnya tidak jauh beda  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 :

Pengertian dan Cara Menggunakan Bootstrap
Membuat Table dengan Bootstrap

Bagi teman-teman yang kurang paham dengan menampilkan gambar html dengan css karena tidak begitu menguasai CSS, sehingga solusinya yang paling tepat yaitu memakai bootstrap. Dengan bootstrap kita dapat menampilkan gambar pada halaman web dengan berbagai jenis style yang dapat kita pilih sesuai dengan keinginan kita.

Ada 3 tiga bentuk gambar pada bootstrap diantaranya :

Circle
Rounded
Thumbnail

cara menampilkan gambar dengan bootstrap

Circle

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

<img src="img/logo.p.png" class=" rounded-circle" alt="pemulungkode" width="20%">

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="img/logo.png" class=" rounded" alt="pemulungkode" width="20%">

Thumbnail

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

<img src="img/logo.png" class="img-thumbnail" alt="pemulungkode" width="20%">

Penjelasan pada script src=”img/logo.png”  gambar yang akan saya panggil saya simpan ke folder img/ logo.png ini nama file gambar yang akan di tampilkan.

class=”rounded”  jenis gambar yang akan di tampilkan

width=”20%” mengatur ukuran gambar yang akan ditampilkan.

Contoh script lengkpnya :

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Part 3 : menampilkan gambar dengan Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="bootstrap/js/jquery.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<body>
    <h1>Menampilkan gambar dengan Bootstrap
        <br> www.pemulungkode.com
    </h1>
    <div class='container'>
        <img src="img/logo.png" class=" rounded" alt="pemulungkode" width="20%">
        <img src="img/logo.p.png" class=" rounded-circle" alt="pemulungkode" width="20%">
        <img src="img/logo.png" class="img-thumbnail" alt="pemulungkode" width="20%">
    </div>
</body>
</html>

cara menampilkan gambar dengan 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="img/logo.png" class="img-fluid" alt="pemulungkode">

 

Sekian pembahasan singkat mengenai cara menampilkan 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.

Tutorial Bootstrap Dasar Lainnya :

Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap
Bootstrap Part 2 : Membuat Table dengan Bootstrap
Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap
Bootstrap Part 4 : Membuat Tombol dengan Bootstrap
Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap
Bootstrap Part 6 : Membuat Pesan Alert dengan Bootstrap
Bootstrap Part 7 : Cara Membuat Icon dengan Bootstrap
Bootstrap Part 8 : Pagination dan Breadcrumb dengan Bootstrap
Bootstrap Part 9 : Membuat List dengan Bootstrap
Bootstrap Part 10 : Membuat Panel dengan Bootstrap
Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap
Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Bootstrap Part 13 : Membuat Form dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel dengan Bootstrap
Bootstrap Part 15 : Membuat Modal dengan Bootstrap
Bootstrap Part 16 : Mengenal System Grid Bootstrap

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *