Membuat gambar lingkaran di bootstrap 5

Diterbitkan 21 Okt 2018 Diperbarui 10 Jun 2020

Jika skala gambar melebar atau meninggi maka gambar bisa saja menjadi tidak bulat, bahkan oval / gepeng. Pastikan untuk menggunakan gambar square agar tidak repot lagi menyesuaikan kerapihannya….

Membuat gambar menjadi bulat atau melingkar dan terlihat rapih di Bootstrap lebih mudah dibanding membuat gambar bulat di HTML CSS seperti yang pernah dijelaskan sebelumnya, Bootstrap telah menyediakan class yang bisa membantu gambar menjadi bulat dengan cepat.

Misalnya sekarang kamu memiliki struktur seperti ini:

Circle Image Bootstrap - Posciety
        

Tambahkanlah class img-circle untuk membuat gambar jadi bulat, seperti ini:

ads by posciety

Gambar Bulat Bootstrap - Posciety
          

Simpan dan lihat hasilnya !

Jika ingin memastikan gambarnya responsive silahkan gunakan class img-responsive [utuk Bootstrap 3] agar gambar menjadi responsive, jika menggunakan Bootstrap 4 gunakan class img-fluid. Karena Bootstrap 3 dan Bootstrap 4 memiliki beberapa perbedaan salah satunya adalah responsive gambar ini.

Tips: Gunakanlah gambar yang kotak [square]

Jika skala gambar melebar atau meninggi maka gambar bisa saja menjadi tidak bulat, bahkan oval/gepeng [tidak berbentuk lingkaran/melingkar]. Pastikan untuk menggunakan gambar square agar tidak repot lagi menyesuaikan kerapihannya.

• By
• 6 January 2016
• 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

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 round 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:

• cara membuat background image di bootstrap
• tampilkan gambar
• Membuat foto lingkaran boo
• cara membuat gambar responsive dengan bootstrap
• Mengecilkan ukuran gambar css bootstrap
• gambar bootstrap
• upload gambar bostrap
• buat text di samping gambar dengan bootstrap
• style tampilan photo degan boostrap
• cara membuat gambar sejajar pada html

Tags: cara membuat tampilan gambar dengan bootstrap, image bootstrap, img-circle, img-responsive, img-rounded, img-thumbnail, membuat galery gambar dengan bootstrap, membuat gambar bulat dengan bootstrap, membuat gambar circle dengan bootstrap, membuat gambar responsive dengan bootstrap, membuat gambar responsive dengan menggunakan bootstrap, membuat gambar thumbnail dengan bootstrap