Hallo teman-teman Dumet School. Bertemu lagi dengan saya Shelli Ripati di Kursus Web Design. Kali ini saya akan membahas tentang cara Mengenal Class Display Pada Bootstrap 4. Nah didalam class display pada bootstrap 4 ini membahas tentang display inline dan display block maupun display none.
Oke teman-teman, untuk Mengenal Class Display Pada Bootstrap 4 lebih dalem berikut adalah penjelasan masing-masing classnya ya.
- d-inline membuat suatu elemen jadi inline displaynya
- d-block membuat suatu elemen jadi memblock displaynya
- d-none membuat suatu elemen jadi tidak terlihat atau hilang
Untuk Mengenal Class Display Pada Bootstrap 4 lebih dalam kita akan membahas tentang hiding elemen. Dan berikut penjelasannya ya teman-teman.
- .d-none menyembunyikan suatu elemen disemua ukuran layar
- .d-none .d-sm-block menyembunyikan suatu elemen hanya pada ukuran layar xs
- .d-sm-none .d-md-block menyembunyikan suatu elemen hanya pada ukuran layar sm
- .d-md-none .d-lg-block menyembunyikan suatu elemen hanya pada ukuran layar md
- .d-lg-none .d-xl-block menyembunyikan suatu elemen hanya pada ukuran layar lg
- .d-xl-none menyembunyikan suatu elemen hanya pada ukuran layar xl
- .d-block menampilkan suatu elemen disemua ukuran layar
- .d-block .d-sm-none menampilkan suatu elemen disemua ukuran layar
- .d-block .d-sm-none menampilkan suatu elemen hanya pada ukuran layar xs
- .d-none .d-sm-block .d-md-none menampilkan suatu elemen hanya pada ukuran layar sm
- .d-none .d-md-block .d-lg-none menampilkan suatu elemen hanya pada ukuran layar md
- .d-none .d-lg-block .d-xl-none menampilkan suatu elemen hanya pada ukuran layar lg
- .d-none .d-xl-block menampilkan suatu elemen hanya pada ukuran layar xl
Nah teman-teman bisa gunakan class display diatas ini yang ada pada bootstrap 4. Class display ini bisa kita gunakan baik untuk elemen gambar, tulisan atau div sesuai dengan kebutuhan kita. Dan kita bisa atur juga pada layar ukuran berapa kita akan menampilkan elemen tersebut atau menyembuyikan elemen tersebut.
Demikian artikle tentang cara Mengenal Class Display Pada Bootstrap 4. Semoga artikel ini dapat bermanfaat untuk teman-teman dan buat teman-teman yang ingin mengeksplore lagi class class yang disediakan oleh bootstrap bisa kunjungi link getbootstrap.com . Selamat mencoba