Resimler

Responsive görseller

CoreUI'daki Bootstrap görselleri, .img-fluid ile responsive hale getirilmiştir. Bu, görsele max-width: 100%; ve height: auto; uygulayarak, ebeveyn öğesi ile ölçeklenmesini sağlar.

Görsel küçük resimleri

ipucu

Bir görsele yuvarlak 1 piksel kenar görünümü vermek için .img-thumbnail sınıfını kullanabilirsiniz.

border-radius yardımcı programları ek olarak, .img-thumbnail sınıfını kullanarak görselinizin kenarlarını yuvarlayabilirsiniz.

Görselleri hizalama

Görselleri yardımcı akış sınıfları veya metin hizalama sınıfları ile hizalayın. block düzeyindeki görseller, .mx-auto marj yardımcı sınıfını` kullanarak ortalanabilir.

Resim

Bir öğesi kullanarak belirli bir için birden fazla öğesi belirliyorsanız, `.img-*` sınıflarını etiketine eklediğinizden emin olun ve `` etiketine eklemeyin.

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

Görsel sınıflarını doğru yerde kullanmak görsel uyumluluğu artırır.
— Bootstrap Belgeleri

Özelleştirme

SASS değişkenleri

Görsel küçük resimleri için değişkenler mevcuttur.