Apakah anda pernah melihat suatu peringatan atau notifikasi pada saat menjelajahi suatu website? saya yakin anda pasti pernah melihatnya, peringatan tersebut bisa bermacam bentuk tapi kebanyak berbentuk box. Pada tutorial kali ini saya akan membahas bagaimana Cara Membuat Box Notifikasi Menggunakan Bulma CSS Framework.

Tampilan website sangat berpengaruh pada kenyamanan pengguna website itu sendiri, maka dari itu kita harus membuat suatu website semenarik mungkin sampai hal-hal kecil seperti membuat box untuk notifikasi. Kita tidak perlu susah-susah membuat suatu box notifikasi menggunakan css karena di bulma sudah menyediakan suatu class yang langsung membentuk box notifikasi. Nah dengan menggunakan class .notification pada bulma, kali ini saya akan memberikan langkah-langkah Cara Membuat Box Notifikasi Menggunakan Bulma CSS Framework:

– 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:

Untuk Penjelasan kode html-nya saya sudah berikan commenting pada kode di atas. Setelah selesai coba teman-teman buka di browser temna-teman maka tampilannya akan menjadi seperti berikut:

Cara Membuat Box Notifikasi Menggunakan Bulma CSS Framework

– Di Bulma hampir mirip dengan bootstrap kita tidak perlu cape jika ingin mengganti warna background cukup menambhakan class. Coba anda ketikan kode di bawah ini:

 

dan refresh browser teman-teman, maka tampilannya kaan menjadi seperti ini:

Cara Membuat Box Notifikasi Menggunakan Bulma CSS Framework

Dengan bulma kita dapat membuat suatu box notifikasi yang simpel dan menarik hanya dengan memberikan .notification dan mengisikan beberapa elemen-elemen yang lain pada .notification dengan hanya memanggil class yag sudah disediakan oleh bulma.

Sekian Tutorial tentang Cara Membuat Box Notifikasi Menggunakan Bulma CSS Framework. Semoga bermanfaat.