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 …

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:

  1. Bootstrap 4 Hide Element Based On Screen Size. 29 Ocak 2021. https://code.luasoftware.com/tutorials/bootstrap/bootstrap-hide-element-based-on-viewport-size/