Di setiap framework css pasti ada class yang berfungsi menyembunyikan konten sesuai dengan resolusi perangkat yang kita pakai untuk membuka website tersebut. Contoh kita pada saat kita mebuka website di desktop ada satu konten yang tidak ada apabila kita membuka websitenya di smartphone. Pada artikel kali ini saya akan membahs tentang fungsi hidden pada bulma framework.

Di sini saya akan memberikan contohnya untuk membahas fungsi hidden pada bulma framework. Langsung saja teman-teman buka text editor teman-teman untuk mencoba contoh yang saya berikan, berikut langkah-langkahya:

– Pertama, anda download file bulmanya di situs bulma itu sendiri dan tempatkan pada folder project yang teman-teman buat.

– Kedua, anda ketikan kode html di bawah ini:

Coba teman-teman buka di browser teman-teman lalu buka menu developer untuk merubah resolusinya. Di sini saya menggunakan firefox sebagai browser bawaannya.

Pertama ubah resolusinya sebesar 1339px maka tampilannya akan menjadi seperti berikut:

Fungsi hidden pada Bulma Framework

Kolom wide screen tidak akan tampil di layar.

Kedua ubah resolusinya sebesar 1000px maka tampilannya akan menjadi seperti berikut:

Fungsi hidden pada Bulma Framework

Kolom desktop tidak akan tampil di layar.

Ketiga ubah resolusinya sebesar 770px maka tampilannya akan menjadi seperti berikut:

Fungsi hidden pada Bulma Framework

Kolom tablet tidak akan tampil di layar.

Keempat ubah resolusinya sebesar 768px maka tampilannya akan menjadi seperti berikut:

Fungsi hidden pada Bulma Framework

Kolom mobile tidak akan tampil di layar.

Berikut adalah batas masing-masing resolusi perangkat pada bulma:

  • Wide Screen : >= 1192px
  • Desktop : >= 1000px sampai 1191px
  • Tablet : >= 770px sampai 998px
  • Mobile : 0 sampai 768px

Dengan adanya fungsi hidden pada bulma kita teman-teman dapat menyembunyikan beberapa konten sesuai resolusi yang teman-teman inginkan untuk membuat tampilan website menjadi lebih baik, cukup dengan menambahkan class is-hidden-mobile untuk contohnya pada konten yang akan disembunyikan saat keadaan di buka dalam perangkat mobile.

Sekian artikel kali ini tentang fungsi hidden pada bulma framework.