Rekomendasi Kursus:

Pemberitahuan Bootstrap 5

Pemberitahuan

Bootstrap 5 menyediakan cara yang mudah untuk membuat pemberitahuan yang sudah ditetapkan:

  • Pemberitahuan yang dibuat menggunakan .alert class, diikuti dengan salah satu class konteks:
  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
  • .alert-primary
  • .alert-secondary
  • .alert-light

Contoh

<div class="alert alert-success">
  <strong>Sukses!</strong> Pemberitahuan ini menunjukkan sukses atau tindakan positif.
</div>

Coba Sendiri

.alert-dark

Tautan Pemberitahuan .alert-link Kelas ditambahkan ke setiap tautan di dalam pemberitahuan, dapat menciptakan "tautan berwarna yang cocok":

Contoh

<div class="alert alert-success">
  <strong>Sukses!</strong> Anda seharusnya <a href="#" class="alert-link">membaca pesan ini</a>.
</div>

Coba Sendiri

Tutup Pemberitahuan

Untuk menutup pemberitahuan, silakan .alert-dismissible Kelas ditambahkan ke kontainer pemberitahuan. kemudian class="btn-close" dan data-bs-dismiss="alert" Tambahkan ke elemen tautan atau tombol (ketika Anda mengkliknya, pemberitahuan akan menghilang).

Contoh

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Sukses!</strong> Pemberitahuan ini menunjukkan sukses atau tindakan positif.
</div>

Coba Sendiri

Animasi Pemberitahuan yang Berbahaya

.fade dan .show Kelas ditambahkan saat pemberitahuan yang berbahaya ditutup untuk menambahkan efek masuk keluar:

Contoh

<div class="alert alert-danger alert-dismissible fade show">

Coba Sendiri