Bootstrap 4 Gambar
Bootstrap 4 Bentuk Gambar
Sudut Bulat:
Lingkaran:
Gambar kecil:
Sudut Bulat
Kelas .roundedmenambahkan sudut membulat ke gambar:
Contoh
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Lingkaran
Kelas .rounded-circlemembentuk gambar menjadi lingkaran:
Contoh
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
gambar mini
Kelas .img-thumbnailmembentuk gambar menjadi thumbnail (berbatas):
Contoh
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Menyejajarkan Gambar
Apungkan gambar ke kanan dengan .float-rightkelas atau ke kiri dengan .float-left:
Contoh
<img src="paris.jpg" class="float-left">
<img src="paris.jpg"
class="float-right">
Gambar Terpusat
Pusatkan gambar dengan menambahkan kelas utilitas .mx-auto(margin:auto) dan .d-block(tampilan:blok) ke gambar:
Contoh
<img src="paris.jpg" class="mx-auto d-block">
Gambar Responsif
Gambar datang dalam semua ukuran. Begitu juga layar. Gambar responsif secara otomatis menyesuaikan agar sesuai dengan ukuran layar.
Buat gambar responsif dengan menambahkan .img-fluidkelas ke <img>tag. Gambar kemudian akan diskalakan dengan baik ke elemen induk.
Kelas .img-fluidberlaku max-width: 100%;dan
height: auto;ke gambar:
Contoh
<img class="img-fluid" src="img_chania.jpg" alt="Chania">