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:

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/