Cara Membuat Gambar Menjadi Bulat & Rapih di Bootstrap

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:

<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 !

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.


Jangan Lupa Share !!!

56
9 shares, 56 points

Apa Reaksimu ?

Bingung Bingung
1
Bingung
Kesal Kesal
9
Kesal
OMG OMG
1
OMG
Takut Takut
10
Takut
Keren Keren
8
Keren
Sedih Sedih
3
Sedih
Posciety Tech

Advanced Competent

Official Channel Posciety.Com yang menyuguhkan informasi dan updates seputar dunia teknologi. Dikelola oleh tim Posciety Tech.

0 Komentar

Pilih Format
Artikel
Default, Membuat Artikel/Cerita
List
Listicle, Misalnya: 3 Hal yang Wajib Dilakukan Saat...
Kuis Kepribadian
Membuat kuis Tentang Kepribadian
Poll
Vote untuk Membuat Keputusan atau Mencari Saran
Meme
Membuat Meme dari Gambar Normal yang Kamu Miliki