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/