Membuat Pesan Alert Dengan Bootstrap

Pada artikel kali ini kita akan membuat sebuah alert atau pesan dengan menggunakan Bootstrap. Alert berfungsi untuk memberikan pesan atau umpan balik kepengguna atas tidakkan yang dilakukan oleh pengguna. Untuk membuat pesan alert dengan bootstrap dengan cara kita hanya perlu menambahkan class “alert” untuk mendefinisikan penggunaan alert bootstrap. selanjutnya tambahkan satu class lagi untuk menentukan jenis alert apa yang di gunakan diantaranya alert-success, alert-info, alert-warning, dan alert-danger.

• class alert-success, pesan alert yang ditampilkan berwarna hijau dan biasanya di gunakan untuk membuat pesan sukses.
• class alert-info, pesan alert yang ditampilkan berwarna biru dan biasanya di gunakan untuk membuat pesan yang berupa informasi.
• class alert-warning, pesan alert yang ditampilkan berwarna kuning dan biasanya di gunakan untuk membuat pesan yang berupa peringatan.
• class alert-danger, pesan alert yang ditampilkan berwarna merah dan biasanya pesan alert ini di gunakan untuk membuat pesan gagal.

Berikut kita akan membuat contoh penggunaan dari class-class yang di jelaskan diatas.
Pertama tama kita buat tag <div> yang di dalamnya ditanam class alert ditambah salah satu class yg 4 tadi, misalnya seperti berikut :

<div class="container">
        <div class="alert alert-success">Pesan yang di tampilkan Sukses</div>
        <div class="alert alert-info">Pesan yang di tampilkan Info</div>
        <div class="alert alert-warning">Pesan yang di tampilkan Warning</div>
        <div class="alert alert-danger">Pesan yang di tampilkan Danger</div>
</div>

Ketika dijalankan hasilnya seperti berikut

Kita bisa menambahkan tombol close pada pesan tersebut, dengan menambahkan tag seperti ini 
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
disimpan di dalam tag <div> seperti ini

<div class="container">
        <div class="alert alert-success">
             <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
             Pesan yang di tampilkan Sukses
        </div>
        <div class="alert alert-info"> 
             <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
             Pesan yang di tampilkan Info
        </div>
        <div class="alert alert-warning">
             <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
             Pesan yang di tampilkan Warning 
        </div>
        <div class="alert alert-danger">
             <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> 
             Pesan yang di tampilkan Danger
       </div>
</div>

Untuk lebih jelasnya bisa lihat contoh pada link Berikut

Semoga bermanfaat..