Padu Mulung - Download Aplikasi Gratis dan Premium, Jasa Web design dan Jasa SEO

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.

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.

Daftar Isi

Ada 3 tiga bentuk gambar pada bootstrap diantaranya :

Circle
Rounded
Thumbnail

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>

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 :

Tutorial Bootstrap Part 3- Cara Menampilkan gambar dengan bootstrap