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:
<h2>Circle Image Bootstrap - Posciety</h2> <img src="https://snag.gy/L95xVf.jpg" alt="">
Tambahkanlah class img-circle untuk membuat gambar jadi bulat, seperti ini:
<h2>Gambar Bulat Bootstrap - Posciety</h2> <img src="https://snag.gy/L95xVf.jpg" class="img-circle" alt="">
Simpan dan lihat hasilnya !
Baca Juga:
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.