Cara Menampilkan Gambar Responsive Dengan Bootstrap

Assalamu'alaikum Wr.Wb

Salam Dan Bahagia

Pendahuluan

        Pada kali ini saya akan membagikan sedikit Tutorial yaitu cara Menampilkan Gambar Responsive pada Bootstrap.

Latar Belakang

         Ingin belajar tentang class-class untuk gambar yang ada di dalam framework bootstrap.

Maksud Dan Tujuan

        Dapat menampilkan gambar berbagai bentuk serta Responsive.

Jangka Waktu yang dibutuhkan

        20 Menit

Alat dan bahan

        Laptop.

        Browser.

        Teks Editor.

Pembahasan atau langkah kerja

        Bootstrap sendiri sudah menyediakan class untuk mengatur gambar sesuai dengan keinginan kita, misalnya membuat untuk gambar dengan bentuk persegi, lingkaran dan gambar yang responsive. Berikut ini saya jelaskan tentang beberapa class bootstrap yang bisa di gunakan untuk membuat memanipulasi tampilan gambar pada bootstrap.

• .img-responsive
  class img-responsive berguna untuk membuat gambar menjadi responsive saat di jalankan pada semua bentuk dan ukuran resolusi.
• img-rounded
  class img-rounded di gunakan untuk membuat gambar berbentuk round atau pada sisi sudut gambar memiliki bentuk melengkung.
• img-circle
  class img-circle di gunakan untuk membuat gambar dengan bentuk lingakaran.
• img-thumbnail
  class img-thumbnail di gunakan untuk membuat gambar thumbnail dengan bootstrap.

Oke akan saya tunjukkan bagaimana cara Menampilkan Gambar Untuk Thumbnail

Berikut Hasilnya :

Source Code :

Dan Berikut jika gambar Menggunakan Class Circle.

Source Code :

Nah dan yang terakhir berikut merupakan hasil jika menggunakan class rounded.

Source Code :

Untuk membuat gambar yang responsive kalian hanya menambhakan tag :

img-responsive

Maka secara otomatis gambar akan responsive secara sendirinya.

      Dengan adanya class-class gambar yang ada di Bootstrap kita jadi lebih mudah unutk menampilkan gambar dari tipe Thumbnile, circle maupun rounded, serta jika gambar yang ditampilkan ingin dibuat responsive hanya tinggal menmabahkan class img-responsive pada setiap class gambarya.

Sekian yang dapat saya sampaikan, mohon maaf bila ada kesalahan dalam penulisan maupun tatabahasa, sekian dan terima kasih.

Wassalamu'alaikum Wr.Wb