Panduan Membuat Alert Box di Bootsrap 4

Dengan menggunakan Bootstrap 4, kita bisa membuat Alert Message dengan mudah. Berikut adalah contoh tampilan Alert yang bisa kita buat di Bootstrap 4:

Alert Message

Alert Box dapat kita buat dengan menggunakan atau dengan menambahkan class .alert diikuti dengan salah satu class konteks seperti .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light atau .alert-dark. Berikut adalah contohnya:

<div class="alert alert-success">
  <strong>Success!</strong> Alert Box ini menandakan tindakan positif atau tindakan yang berhasil.
</div>

Lihat kode di Github | Lihat Live Demo


Alert Link

Jika kalian ingin membuat Link yang berada di dalam Alert Box, kalian dapat menggunakan class .alert-link. Berikut adalah contohnya:

 Alert Link

<div class="alert alert-success">
  <strong>Success!</strong> Kalian dapat membacanya <a href="#" class="alert-link">di Link ini</a>.
</div>

Lihat kode di Github | Lihat Live Demo

Closing Alert

Closing Alert

Untuk membuat Alert yang bisa di tutup, kita dapat menggunakan class .alert-dismissible kedalam Container. Kemudian tambahkan class="close" dan data-dismiss="alert" kedalam elemen Link atau Tombol (Ketika kalian mengekliknya, Alert Box akan hilang). Berikut adalah contohnya:

<div class="alert alert-success alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Success!</strong> Alert Box ini menandakan tindakan positif atau tindakan yang berhasil.
</div>

Lihat kode di Github | Lihat Live Demo

Tips: &times; adalah Entity HTML yang merupakan Icon atau tanda (×) untuk tombol Close/Tutup.

Animasi Alert

Animasi Alert

Untuk menambahkan efek animasi Fading ketika menutup Alert, kita bisa menambahkan Class .fade dan .show. Berikut adalah contohnya:

<div class="alert alert-success alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  <strong>Success!</strong> Alert Box ini menandakan tindakan positif atau tindakan yang berhasil.
</div>

Lihat kode di Github | Lihat Live Demo

Catatan: Untuk pembahasan lebih lengkap tentang Alert, mungkin akan kita bahas pada bagian selanjutnya. Terimakasih.

0 Komentar