Bootstrap 4 Ekran Boyutuna Göre Gizle ve Göster
Bootstrap 4’le birlikte değişik ekran boyutlarına göre öğeleri gizleyebilir ve gösterebilirsiniz. Bunun için hazırlanan tablo ile kolaylıkla gerçekleştirebilirsiniz.
Eğer bir eleman boyutu sm ve altında gizlemek, ancak md, lg ve xl görünür olmasını istiyorsanız, d-none d-md-block kullanın.
| xs (<576px) | sm (≥576px) | md (≥768px) | lg (≥992px) | xl (≥1200px) | |
|---|---|---|---|---|---|
d-none d-sm-block |
gizle | göster | göster | göster | göster |
d-none d-md-block |
gizle | gizle | göster | göster | göster |
d-none d-lg-block |
gizle | gizle | gizle | göster | göster |
d-none d-xl-block |
gizle | gizle | gizle | gizle | göster |
d-block d-xl-none |
göster | göster | göster | göster | gizle |
d-block d-lg-none |
göster | göster | göster | gizle | gizle |
d-block d-md-none |
göster | göster | gizle | gizle | gizle |
d-block d-sm-none |
göster | gizle | gizle | gizle | gizle |
Yalnızca Belirli Görüntü Alanı Boyutunda Göster
Sadece sm üzerinde göstermek istiyorsanız ancak diğer boyutlarda gizlemek için, d-none d-sm-block d-md-none kullanın.
| xs (<576px) | sm (≥576px) | md (≥768px) | lg (≥992px) | xl (≥1200px) | |
|---|---|---|---|---|---|
d-block d-sm-none |
göster | gizle | gizle | gizle | gizle |
d-none d-sm-block d-md-none |
gizle | göster | gizle | gizle | gizle |
d-none d-md-block d-lg-none |
gizle | gizle | göster | gizle | gizle |
d-none d-lg-block d-xl-none |
gizle | gizle | gizle | göster | gizle |
d-none d-xl-block |
gizle | gizle | gizle | gizle | göster |
Yalnızca Belirli Görüntü Alanı Boyutunda Gizle
Yalnızca sm‘de gizlemek ancak diğer boyutlarda göstermek istiyorsanız, d-block d-sm-none d-md-block kullanın.
| xs (<576px) | sm (≥576px) | md (≥768px) | lg (≥992px) | xl (≥1200px) | |
|---|---|---|---|---|---|
d-none d-sm-block |
gizle | göster | göster | göster | göster |
d-block d-sm-none d-md-block |
göster | gizle | göster | göster | göster |
d-block d-md-none d-lg-block |
göster | göster | gizle | göster | göster |
d-block d-lg-none d-xl-block |
göster | göster | göster | gizle | göster |
d-block d-xl-none |
göster | göster | göster | göster | gizle |
Bibliyografya:
- Bootstrap 4 Hide Element Based On Screen Size. 29 Ocak 2021. https://code.luasoftware.com/tutorials/bootstrap/bootstrap-hide-element-based-on-viewport-size/
