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/