Bootstrap 3 Alert - Tutorial Bootstrap Indonesia

Membuat Pesan Peringatan dengan Bootstrap 3

Kotak peringatan sering digunakan untuk menampilkan sebuah informasi seperti pesan peringatan, pesan kesalahan atau sebuah konfirmasi.

Dengan Bootstrap kita dapat dengan mudah membuat kotak pesan peringatan yang elegan untuk berbagai keperluan. kita juga dapat menambahkan tombol penutup (close) jika diperlukan

Bootstrap alert tidak hanya bisa digunakan untuk pesan peringatan saja, tapi untuk penggunaan lainnya juga sangat bagus untuk digunakan.

Cara penggunaan Bootstrap 3 Alert

Bootstrap Alert menggunakan nama class .alert sebagai nama class utamanya, yang diikuti nama class .alert-success, .alert-info, .alert-warning, dan .alert-danger sebagai penentu tipe alert.

1. .alert-success : Untuk membuat kotak/box sukses atau konfirmasi (atau sesuai keperluan)
2. .alert-info : Untuk membuat kotak/box informasi (atau sesuai keperluan)
3. .alert-warning : Untuk membuat kotak/box peringatan (atau sesuai keperluan)
4. .alert-danger : Untuk membuat kotak/box kesalahan (atau sesuai keperluan)

Contoh :

<div class="alert alert-success">
  <strong>Alert success :</strong> Lorem ipsum dolor sit amet...
</div>

<div class="alert alert-info">
  <strong>Alert Info :</strong> Lorem ipsum dolor sit amet...
</div>

<div class="alert alert-warning">
  <strong>Alert warning :</strong> Lorem ipsum dolor sit amet...
</div>

<div class="alert alert-danger">
  <strong>Alert danger :</strong> Lorem ipsum dolor sit amet...
</div>

Bootstrap 3 Alert Links

Digunakan untuk element HTML <a> yang berada didalam kotak alert, tambahkan .alert-link pada element <a>

Contoh :

<div class="alert alert-success">
  <strong>Sukses :</strong> silahkan Kunjungi 
  <a class="alert-link" href="#">Artikel ini</a>
</div>

<div class="alert alert-info">
  <strong>Tips :</strong> silahkan Kunjungi 
  <a class="alert-link" href="#">Artikel ini</a>
</div>

<div class="alert alert-warning">
  <strong>Peringatan :</strong> silahkan Kunjungi 
  <a class="alert-link" href="#">Artikel ini</a>
</div>

<div class="alert alert-danger">
  <strong>Kesalahan :</strong> silahkan Kunjungi 
  <a class="alert-link" href="#">Artikel ini</a>
</div>

Bootstrap 3 Alert Close

Untuk menutup pesan peringatan tambahkan class .alert-dismissable pada element pembungkus alert, kemudian buat html baru, bisa menggunakan element span, a, button atau yang lainnya sesuai keperluan, tambahkan class .close serta tambahkan attribute data-dismiss="alert" pada element HTML tersebut.

Catatan : Alert Close jika digunakan, akan menghapus element kotak alert bukan memberi tampilan tersimpan/hidden atau efek (display:none).

Contoh :

<div class="alert alert-info alert-dismissable">
  <span class="close" data-dismiss="alert">&times;</span>
  <strong>Tekan</strong> Tanda (x) yang berada di sebalah kanan alert ini
</div>

Bootstrap 3 Alert Efek

Untuk memberikan efek animasi memudar pada saat kotak/box Alert ditutup, tambahkan class .fade dan .in pada container/pembungkus alert yang digunakan.

Contoh :

<div class="alert alert-info alert-dismissable fade in">
  <span class="close" data-dismiss="alert">&times;</span>
  <strong>Tekan</strong> Tanda (x) yang berada di sebalah kanan alert ini
  untuk menutup alert dengan efek memudar.
</div>