Bootstrap Resimler

Bootstrap'ta resim eklemek için img etiketi kullanılmaktadır. İmg etiketi ile kullanılan sınıflar ve bu sınıflar ile hangi özelliklerin kullanıldığını öğreneceksiniz.

Bootstrap resimler için kullanılan sınıflar:

  • .img-fluid
  • .img-thumbnail
  • .rounded
  • .rounded-circle
  • .float-right
  • .float-left
  • .mx-auto d-block

Bootstrap Responsive Resim

Bootstrap'ta duyarlı yani responsive resimler için img-fluid sınıfı kullanılmaktadır. 

Bootstrap .img-fluid Sınıfı Kullanımı

<img src="resim_adresi.jpg" class="img-fluid" alt="Responsive Duyarlı Resim">

 

Bootstrap Kenarlıklı Resim

Bootstrap'ta resme 1 piksel kenarlık eklemek için .img-thumbnail sınıfı kullanılmaktadır.

Bootstrap .img-thumbnail Sınıfı Kullanımı

<img src="resim_adresi" class="img-thumbnail" alt="Kenarlıklı Resim">

 

Bootstrap Köşeleri Oval Resim

Bootstrap rounded sınıfı resimlerin köşelerini yuvarlaklaştırmak için kullanılır.

Bootstrap .rounded Sınıfı Kullanımı

<img src="Resim_adresi.jpg" class="rounded" alt="Köşeleri Yuvarlaklaştırılmış Resim">

 

Bootstrap Daire Çerçeve

Bootstrap daire çerçeve içerisine resim eklemek için .rounded-circle sınıfı kullanılmaktadır. 

Bootstrap .rounded-circle Sınıfı Kullanımı

<img src="resim_adresi" class="rounded-circle" alt="Bootstrap Daire Çerçeve">

 

Bootstrap Resim Hizalama

Bootstrap'ta resmi sağa, sola ve ortalama işlemleri için kullanılan sınıflar bulunmaktadır. Bu sınıflar:

  • .float-right : Sağa Hizalama
  • .float-left : Sola Hizalama
  • .mx-auto d-block : Ortalama

Bootstrap Resmi Sağa Hizalama

<img src="resim_adresi" class="float-right" alt="Bootstrap Resmi Sağa Hizalama">

Bootstrap Resmi Sola Hizalama

<img src="resim_adresi" class="float-left" alt="Bootstrap Resmi Sola Hizalama">

Bootstrap Resmi Ortalama

<img src="resim_adresi" class="mx-auto d-block" alt="Bootstrap Resmi Ortalama">

 

Önceki Ders: Bootstrap Tablolar Sonraki Ders: Bootstrap Jumbotron