Tutorial Bootstrap 4 #11 : Alert Bootstrap 4

Alert Bootstrap 4 – Pesan notifikasi atau semacam pesan pemberitahuan merupakan salah satu komponen penting dalam sebuah aplikasi atau website.

Biasanya pesan notifikasi atau pesan alert ini digunakan untuk memberikan respon pesan ke pengguna aplikasi.

Misalnya ketika pengguna melakukan login, jika username dan password yang diinput oleh pengguna salah, tentu pasti akan ada pesan notifikasi yang muncul dengan tujuan untuk memberitahukan pengguna bahwa login gagal, karena username dan password yang diinputkan salah.

Pesan notifikasi pada saat login hanya salah satu contoh, ada juga pesan notifikasi yang tampil ketika data berhasil diinput ke database, bahkan sekedar pesan notifikasi selamat datang pada aplikasi atau website.

Ada banyak tempat untuk membuat pesan notifikasi, tergantung keperluan dan keinginan si programmer.

Alert Bootstrap 4

Pada tutorial bootstrap bagian 11 ini kita akan belajar tentang cara membuat pesan notifikasi alert, atau pesan notifikasi pemberitahuan dengan menggunakan class-class yang sudah disediakan oleh bootstrap.

Ada banyak jenis alert yang disediakan di bootstrap 4. diantaranya adalah :

• .alert-success
  Pesan alert ini berwarna hijau, biasanya digunakan untuk notifikasi yang bersifat positif, seperti misalnya memberitahukan suatu proses yang berhasil dilakukan.
• .alert-primary
  Pesan alert primary ini adalah pesan notifikasi yang berwarna biru.
• .alert-secondary
  Pesan alert secondary adalah pesan notifikasi yang berwarna abu-abu.
• .alert-danger
  Pesan notifikasi ini berwatna merah, biasanya digunakan untuk pemberitahuan proses yang gagal dilakukan.
• .alert-warning
  Pesan alert warning adalah pesan yang yang berwarna kuning.
• .alert-info
  Sesuai dengan nama class nya “info”, pesan alert ini biasanya digunakan untuk membuat atau menampilkan pesan pemberitahuan yang berupa informasi kepada pengguna. dan memiliki warna biru terang.
• .alert-light
  Pesan notifikasi ini berwarna terang, hampir ke abu-abuan.
• .alert-dark
  Pesan notifikasi alert dark adalah notifikasi yang berwarna gelap.

Penjelasan dari jenis alert di atas bukanlah suatu ketentuan yang harus diikuti, penjelasan di atas hanya gambaran tentang penggunaan alert bootstrap pada umumnya.

Membuat Pesan Alert Menggunakan Bootstrap 4

Untuk cara membuat pesan notifikasi alert menggunakan bootstrap, pertama buat element <div> .. </div>. dan kita hanya tinggal menuliskan class  .alert di elemen <div> tersebut.

Kemudian lanjutkan dengan menuliskan salah satu class yang ada di list di atas tadi sesuai dengan jenis alert yang ingin dibuat.

Perhatikan contoh berikut ini. pertama teman-teman jangan lupa untuk menghubungkan proyek nya dengan bootstrap 4.

Untuk cara menghubungkan atau instalasi bootstrap 4 sudah dijelaskan pada tutorial sebelumnya, yaitu pada Tutorial Bootstrap 4 #2 : Cara Menggunakan Bootstrap 4.

alert.html

Perhatikan pada contoh di atas, untuk cara menghubungkan bootstrap 4 nya tidak lagi dijelaskan secara detail, silahkan teman-teman membaca kembali di tutorial sebelumnya.

Untuk cara membuat alert bootstrap 4, kita tinggal menuliskan class .alert, kemudian diikuti dengan jenis alert nya, tergantung jenis alert yang ingin dibuat. misalnya alert-success, alert-primary dan lain-lain.

Jalankan pada browser, sekarang kita lihat hasilnya.

alert bootstrap 4

Gambar di atas adalah contoh alert yang disediakan oleh bootstrap, cukup mudah bukan cara penggunaannya.

Posisi Text Alert

Kita juga bisa mengubah posisi text pada pesan alert. untuk memindahkan text ke tengah, tambahkan class .text-center, untuk memindahkan text ke kanan, tambahkan class .text-right.

Contoh :

Maka hasilnya akan seperti berikut.

posisi text alert bootstrap 4

Membuat Link Pada Alert Bootstrap 4

Jika teman-teman ingin menambahkan link pada pesan alert ini, teman-teman bisa langsung menambahkan tag hyperlink seperti membuat link biasa. selanjutnya tambahkan class .alert-link pada tag <a> tersebut.

Pesan Alert Dengan Tombol Close

Kita juga bisa menambahkan tombol close pada pesan alert. jadi ketika pengguna ingin menutup atau menghilangkan pesan alert tersebut, pengguna tinggal klik pada tombol close.

Berikut adalah contoh pesan alert bootstrap 4 dengan tombol close.

Perhatikan pada syntax di atas. kita menggunakan class .alert-dismissable untuk membuat alert yang mempunyai tombol close. kemudian class .fade berguna sebagai efek pada saat alert menghilang. class .fade ini akan membuat efek memudar secara perlahan sampai alert menghilang.

Sedangkan class .show berguna sebagai menampilkan alert secara default.

dan terakhir kita buat tombol closenya, yang pada saat di klik, otomatis alert akan ditutup atau disembunyikan.

Dan hasil nya akan seperti berikut.

alert bootstrap 4 dengan tombol close

Penutup

Oke mantap. selesai sudah materi tentang membuat notifikasi alert menggunakan Bootstrap 4.

Pada tutorial ini kita sudah belajar banyak, mulai dari penjelasan tentang alert pada bootstrap, kemudian kegunaannya, jenis-jenis alert yang disediakan oleh bootstrap, mengubah posisi text notifikasinya.

Sampai dengan membuat tombol close/tutup pada notifikasi alert.

Semoga semua penjelasannya bisa diterima dengan baik oleh teman-teman.

Untuk dokumentasi lengkapnya sendiri tentang cara membuat pesan alert dengan bootstrap 4, teman-teman bisa membacanya langsung pada dokumentasi yang ada di website bootstrap.

Demo

Download Source Code