Hai teman-teman semuanya, apa kabar? semoga tetap dalam keadaan sehat., gimana masih semangat belajarnya? kita lanjut lagi pembahasan kita tentang bootstrap, kali ini kita akan mengenal class d-block dan d-none pada bootstrap 4.

Seperti yang kita tau pada bootstrap 4 ini banyak sekali class-class yang telah diupdate dari versi sebelumnya yakni bootstrap 3, kali ini kita akan membahas class yang sebelumnya di bootstrap 3 kita kenal dengan hidden-sm, hidden-md dll yang berfungsi untuk mengatur tampil tidaknya suatu component pada saat kondisi screen tertentu, di bootstrap 4 class tersebut sudah tidak digunakan lagi, di bootstrap 4 class tersebut di update menjadi d-block atau d-none, block untuk menampilkan, none untuk menyembunyikan, kita hanya tinggal menambahkan pada saat kondisi screen berapa content tersebut akan tampil atau disembunyikan.

Nah untuk lebih jelasnya kita langsung saja praktek, pertama silahakan teman-teman buat sebuah file dan ketikan script berikut ini:

saya menggunaakan pemanggilan CDN untuk css bootstrap 4 nya, nah saya membuat sebuah container yang berisikan class alert success, dimana alert tersebut akan tampil dikondisi layar apapun, nah sekarang gimana caranya ketika kita ingin mengatur tampil tidaknya pada keadaan layar tertentu?

coba teman-teman tambahkan class berikut ini pada h1 nya:

yang berarti saya mengatur ketika keadaan layar sm displaynya none namun keadaan md displaynya block.

keadaan sm:

mengenal class d-block dan d-none pada bootstrap 4

keadaan md :

mengenal class d-block dan d-none pada bootstrap 4 1

kalian tinggal hanya menentukan class pada keadaan apa kontent tersebut tampil atau tidaknya,

Oke teman-teman untuk tutorial kali ini saya rasa cukup sampai sini dulu, semoga tutorial kali ini bermanfaat untuk teman-teman semuanya, sampai bertemu lagi pada tutorial berikutnya

Terima kasih