Bootstrap Part 6 : Membuat Pesan Alert Dengan Bootstrap

Membuat Pesan Alert Dengan Bootstrap

Satu lagi kelebihan penggunaan bootstrap yang akan di bahas pada tutorial bootstrap part 6 : Membuat Pesan Alert dengan bootstrap di www.malasngoding.com ini yaitu tentang cara membuat pesan alert atau pesan alert dengan menggunakan bootstrap.

bootstrap menyediakan class khusus untuk membuat pesan alert dengan sangat mudah. di buktikan dengan kemudahan penggunaan bootstrap yang hanya tinggal menambahkan nama-nama class yang sudah di sediakan oleh bootstrap. untuk cara membuat pesan alert dengan bootstrap caranya cukup mudah. anda hanya perlu menambahkan class “alert” untuk mendefinisikan penggunaan alert bootstrap. selanjutnya tambahkan satu class lagi untuk menentukan jenis alert apa yang di gunakan. alert-success, alert-danger, alert-info dan alert-warning. berikut ini di jelaskan tentang penggunaan class alert bootstrap.

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

Cara Membuat Pesan Alert Dengan Bootstrap

untuk membuat pesan alert dengan bootstrap caranya sangat mudah, buat sebuah element <div> yang berisi pesan peringatan alert yang ingin di buat. kemudian pada tag pembuka <div> berikan class “alert” dan satu lagi gunakan class alert seperti penjelasan di atas. bisa menggunakan alert-success untuk membuat pesan alert sukses, alert-info untuk membuat pesan alert informasi, alert-warning untuk membuat pesan alert berupa peringatan dan alert-danger untuk membuat pesan alert gagal. perhatikan contoh berikut ini.

membuat pesan alert dengan bootstrap

dapat di lihat pada contoh di atas, pesan alert dengan bootstrap sudah jadi. tetapi seperti nya masih ada yang kurang. akan lebih bagus jika kita tambahkan tombol silang (x) pada pesan alert sehingga jika tombol silang di klik maka pesan alert akan hilang.

Membuat Tombol Close Pada Pesan Alert Bootstrap

perhatikan contoh berikut untuk membuat tombol close pada alert bootstrap.

membuat alert dengan bootstrap

perhatikan pada contoh di atas. sudah terdapat tombol close untuk menghapus atau menutup pesan alert. untuk membuat tombol close pada pesan alert tambahkan

sedikit tambahan lagi yang harus di perhatikan. kita bisa memberikan efek pada saat pesan alert di tutup. yaitu dengan menambahkan class “fade in” pada element div. efek fade merupakan efek fade in merupakan efek menutup pesan alert dengan efek memudar.

See the Pen dGvByO by Malas Ngoding (@malasngoding) on CodePen.0

sekian tutorial bootstrap part 6 : Membuat pesan alert dengan bootstrap.

Tutorial Bootstrap Dasar Lainnya

Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap
Bootstrap Part 2 : Membuat Table dengan Bootstrap
Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap
Bootstrap Part 4 : Membuat Tombol dengan Bootstrap
Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap
Bootstrap Part 6 : Membuat Pesan Alert dengan Bootstrap
Bootstrap Part 7 : Cara Membuat Icon dengan Bootstrap
Bootstrap Part 8 : Pagination dan Breadcrumb dengan Bootstrap
Bootstrap Part 9 : Membuat List dengan Bootstrap
Bootstrap Part 10 : Membuat Panel dengan Bootstrap
Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap
Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Bootstrap Part 13 : Membuat Form dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel dengan Bootstrap
Bootstrap Part 15 : Membuat Modal dengan Bootstrap
Bootstrap Part 16 : Mengenal System Grid Bootstrap