Yeni nesil web sayfalarında bir içeriği sadece mobilde göstermek veya bir içeriği sadece masaüstünde göstermek isteyebiliriz.Tam tersi istediğimiz içeriyi istediğimiz ekran boyutunda engellemek de isteyebiliri.z
Bootstrap ile display property işlemlerini çok kolay bazı etiketler ile gerçekleştirmemiz mümkündür. Bunun için hazırlanmış bootstrap class yapılarını aşağıda liste olarak paylaştım. Tabloda kullanmak istediğiniz yapıya göre dilediğiniz özellikleri seçebilirsiniz.
| Ekran Boyutu | Class |
|---|---|
| Heryerde Engeller | .d-none |
| Sadece xs Engeller (Mobil) | .d-none .d-sm-block |
| Sadece sm engeller (Geniş mobil) | .d-sm-none .d-md-block |
| Sadece md engeller (Tablet) | .d-md-none .d-lg-block |
| Sadece lg engeller (Dizüstü Pc) | .d-lg-none .d-xl-block |
| Sadece xl engeller (Masaüstü ve üzeri) | .d-xl-none |
| Heryerde gösterir | .d-block |
| Sadece xs göster (Mobil) | .d-block .d-sm-none |
| Sadece sm gösterir (Geniş mobil) | .d-none .d-sm-block .d-md-none |
| Sadece md gösterir (Tablet) | .d-none .d-md-block .d-lg-none |
| Sadece lg gösterir (Dizüstü bilgisayar) | .d-none .d-lg-block .d-xl-none |
| Sadece xl gösterir (Masaüstü ve üzeri) | .d-none .d-xl-block |
Yukarıda gösterilen yardımcı tanımlar yani mobil , masaüstü gibi tanımlar kolaylık sağlamak için verilmiş olup değişkenlikler gösterebilir. Örneğin bir table bir dizüstü pc den daha büyük olabilir.
Yukarıdaki kalıplardan en çok kullanılanlar Sadece XS engelleme veya sadece XS göster seçenekleridir.
Örnek
<div class="d-block d-sm-none">
<a href="#"> Whatsapp Sipariş </a>
</div>