tampilan gambar dengan bootstrap

Bootstrap Part 3 : Tampilan Gambar Dengan Bootstrap


Tampilan Gambar Dengan Bootstrap

Pada tutorial sebelumnya di edisi tutorial belajar bootstrap di www.malasngoding.com telah di jelaskan tentang pengertian dan cara menggunakan bootstrap, cara membuat table dengan bootstap dan pada tutorial kali ini akan di bahas juga tentang cara membuat tampilan gambar yang menarik dengan bootstrap. yaitu membuat gambar berbentuk melengkung pada sisi sudut, gambar dengan bentuk lingkaran, gambar thumbnail dan gambar responsive dengan bootstrap.

Bootstrap menyediakan class untuk mengatur gambar sesuai dengan keinginan, misalnya membuat gambar dengan bentuk rounder, circle(lingkaran) dan gambar yang responsive. berikut ini di 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.

berikut ini beberapa contoh yang dapat di lihat untuk membuat tampilan gambar dengan bootstrap.

Membuat gambar thumbnail dengan bootstrap

pada gambar di atas kita menggunakan class “img-thumbnail” untuk membuat gambar thumbnail dengan menggunakan bootstrap.

tampilan gambar dengan bootstrap

tampilan gambar dengan bootstrap

Membuat gambar circle dengan bootstrap

Sama dengan cara membuat gambar thumbnail pada contoh di atas. untuk membuat gambar dengan bentuk lingkaran anda dapat menggunakan class “img-circle”. tampilan gambar dengan bootstrap

membuat gambar lingkaran dengan bootstrap

membuat gambar lingkaran dengan bootstrap

Membuat gambar round dengan bootstrap

manipulasi tampilan gambar dengan bootstrap

manipulasi tampilan gambar dengan bootstrap

Membuat gambar responsive dengan bootstrap

untuk membuat gambar responsive dengan menggunakan bootstrap anda dapat melakukannya dengan menambahkan class “img-responsive” pada elemeng gambar. tampilan gambar dengan bootstrap

See the Pen rxypLw by Malas Ngoding (@malasngoding) on CodePen.0

sekian tutorial belajar bootstrap part 3 tentang membuat tampilan gambar dengan bootstrap.

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

Incoming search terms:

  • Mengecilkan ukuran gambar css bootstrap
  • cara memasukan gambar pada bootstrap
  • membuat galeri dengan keterangan bootstrap
  • tampilan bootstrap 3
  • cara membuat gambar dengan bustrep
  • gambar bootstrap
  • bingkai foto bootsrap
  • cara memasukkan gambar menggunakan bootstrap
  • cara memasukkan gambar dengan bootstrap
  • cara menampilkan gambar pada jumbotron




About the author
Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.


Discussion
  • No Comment

Write a Comment

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


CENTANG untuk bisa mengirimkan komentar. [ Verifikasi bukan robot ]