Alert adalah komponen penting untuk menampilkan pesan kepada pengguna, seperti informasi keberhasilan, peringatan, atau kesalahan. Bootstrap menyediakan komponen Alert yang mudah digunakan dan memiliki berbagai pilihan gaya.

Dasar Penggunaan Alert

Untuk membuat notifikasi Alert dasar, Anda perlu menambahkan class .alert pada elemen <div>, diikuti dengan class kontekstual untuk menentukan warnanya.

Kelas Kontekstual Alert:

• .alert-primary: Informasi penting.
• .alert-secondary: Aksi sekunder.
• .alert-success: Aksi berhasil atau positif.
• .alert-danger: Aksi berbahaya atau negatif.
• .alert-warning: Peringatan yang perlu diperhatikan.
• .alert-info: Informasi tambahan.
• .alert-light: Alert dengan latar belakang terang.
• .alert-dark: Alert dengan latar belakang gelap.

Berikut adalah contoh kode untuk berbagai jenis Alert:

<div class="alert alert-primary" role="alert">
  Ini adalah alert primary.
</div>
<div class="alert alert-secondary" role="alert">
  Ini adalah alert secondary.
</div>
<div class="alert alert-success" role="alert">
  Ini adalah alert success.
</div>
<div class="alert alert-danger" role="alert">
  Ini adalah alert danger.
</div>
<div class="alert alert-warning" role="alert">
  Ini adalah alert warning.
</div>
<div class="alert alert-info" role="alert">
  Ini adalah alert info.
</div>
<div class="alert alert-light" role="alert">
  Ini adalah alert light.
</div>
<div class="alert alert-dark" role="alert">
  Ini adalah alert dark.
</div>

Pastikan Anda menambahkan role="alert" untuk meningkatkan aksesibilitas, terutama bagi pengguna screen reader.

Alert dengan Judul

Anda dapat menambahkan judul pada Alert dengan menggunakan tag <h4> yang memiliki class .alert-heading.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Berhasil!</h4>
  <p>Selamat, tindakan Anda telah berhasil diselesaikan.</p>
  <hr>
  <p class="mb-0">Silakan lanjutkan ke langkah berikutnya.</p>
</div>

Penggunaan hr memberikan pemisah visual antara judul dan konten utama Alert.

Alert yang Bisa Ditutup (Dismissible Alerts)

Seringkali, Anda ingin pengguna dapat menutup notifikasi Alert setelah mereka melihatnya. Untuk membuat Alert yang bisa ditutup, lakukan langkah-langkah berikut:

1. Tambahkan class .alert-dismissible pada elemen .alert.
2. Tambahkan elemen tombol (<button>) dengan class .btn-close.
3. Tambahkan atribut data-bs-dismiss="alert" pada tombol untuk mengaktifkan fungsi penutupan.
4. Tambahkan aria-label="Close" untuk aksesibilitas.

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Peringatan!</strong> Ada sesuatu yang perlu Anda perhatikan.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Class .fade dan .show digunakan untuk memberikan efek transisi saat Alert muncul dan menghilang. Jika Anda tidak menginginkan animasi, Anda bisa menghapus class .fade.

Menambahkan Link di Dalam Alert

Anda dapat menambahkan link di dalam Alert. Berikan class .alert-link pada tag <a> agar warnanya sesuai dengan warna Alert.

<div class="alert alert-info" role="alert">
  Silakan <a href="#" class="alert-link">klik link ini</a> untuk informasi lebih lanjut.
</div>

Komponen Alert di Bootstrap sangat berguna untuk memberikan umpan balik visual kepada pengguna Anda. Dengan berbagai pilihan warna dan kemampuan untuk ditutup, Anda dapat menyampaikan pesan dengan efektif dan meningkatkan pengalaman pengguna. Selamat mencoba di proyek Anda di Malang, Jawa Timur! 🚀