Bootstrap 4 image sınıflarını kullanarak resimlerimize çok daha güzel görüntü kazandırabiliriz.
Bootstrap 4 image sınıfları ile köşeleri yuvarlatılmış resimleri .rounded sınıfını kullanarak oluşturabiliriz.
<img class="rounded" src="" />
Örnek 1 için tıklayınız.
Bootstrap 4 image sınıfları ile köşeleri tam yuvarlatılmış resimleri .rounded-circle sınıfını kullanarak oluşturabiliriz.
<img class="rounded-circle" src="" />
Örnek 2 için tıklayınız.
Bootstrap 4 image sınıfları ile thumbnail resimleri .img-thumbnail sınıfını kullanarak oluşturabiliriz.
<img class="img-thumbnail" src="" />
Örnek 3 için tıklayınız.
Bootstrap 4 .float-left ve .float-right sınıfları ile resimleri sağa ya da sola hizalayabiliriz.
<img class="float-left" src="" /> <img class="float-right" src="" />
Örnek 4 için tıklayınız.
Bootstrap 4 ile resmi ortalamak için .mx-auto (sağ ve soldan margin) ve .d-block sınıflarını kullanabiliriz.
<img class="mx-auto d-block" src="" />
Örnek 5 için tıklayınız.
Bootstrap 4 ile responsive bir resim oluşturmak için .img-fluid sınıfını kullanabiliriz.
Bir resme .img-fluid eklediğimizde width:100%; ve height:auto; özelliklerini uygulamış oluyoruz dolayısıyla resmin genişliği içinde bulunduğu etiketin genişliğine göre ayarlanmış oluyor.
<img class="img-fluid" src="" />
Örnek 6 için tıklayınız.