Bootstrap ile farkllı boyuttaki cihazlarda (telefon,tablet,notebook,masaüstü vs) responsive tasarımların uyumlu ve pratik bir şekilde yapılabilmesi için xs-sm-md ve lg gibi ekran ölçüleri kullanılıyor. Tabi bu ölçü ve isimlendirmeler bootstrap sürümlerine göre değişiklik gösterebiliyor.
BOOTSTRAP 3 EKRAN GENİŞLİKLERİ
Bootstrap 3 versiyonunda ekranlar 4 farklı genişlikte düşünülüyor.
XS
Xsmall
<=767 px
Çok küçük ekranlar (Telefonlar)
SM
Small
>=768 px .... <=991 px
Küçük ekranlar (Tabletler)
MD
Medium
>=992 px .... <=1199 px
Orta büyüklükteki ekranlar (Laptop yada Masaüstü bilgisayarlar))
LG
Large
>=1200 px
Büyük ekranlar ( büyük laptop yada Masaüstü bilgisayarlar)
BOOTSTRAP 4 EKRAN GENİŞLİKLERİ
Bootstrap 4 versiyonunda ekranlar 5 farklı genişlikte düşünülüyor. Çok küçük ekranlar için bir isimlendirme yapılmamış. Grid sisteminde sadece "col-1" vs yazılarak belirtilebiliyor. Bootstrap 3 ten farklı olarak ayrıca XL ölçüsü eklenmiş.
Col
Ekstra Small
<576 px
Çok Küçük ekranlar (Telefonlar)
SM
Small
>=576 px .... <=767 px
Küçük ekranlar (Telefon - Tablet)
MD
Medium
>=768 px .... <=991 px
Orta büyüklükteki ekranlar (Tablet, Netbook, küçük Laptop yada Masaüstü ekranlar)
LG
Large
>=992 px .... <=1199 px
Büyük ekranlar (Laptop yada Masaüstü bilgisayarlar)
XL
Extra Large
>=1200 px
Çok Büyük ekranlar ( büyük laptop yada Masaüstü ekranlar)