Tutorial Bootstrap #4: Membuat Alert

Unknown   January 13, 2018   Bootstrap   Comment  

Pada tutorial kali ini kita akan membahas cara membuat alert dengan Bootstrap, alert berguna untuk memberikan pesan error, warning, danger, info atau success dikala user melakukan sebuah aksi aksi tertentu, misalkan seorang user sedang melakukan login dimana user memasukkan username dan password, namun yang user memasukkan data yang salah, maka akan muncul sebuah alert error atau sebaliknya jika user memasukkan data yang benar maka akan muncul sebuah alert success. Terus bagaimana cara membuat alert dengan Bootstrap ?, silahkan simak tutorial berikut ini dengan seksama.

Membuat Alert

Pada Bootstrap, kita telah disiapkan class untuk membuat sebuah alert sebagai berikut class class yang digunakan.

• alert-success
• alert-info
• alert-warning
• alert-danger

Untuk menggunakan class class tersebut harus diawali dengan class "alert" baru dilanjutkan dengan class class diatas, contohnya dapat dilihat pada syntax berikut ini.

    <div class="alert alert-success">

      <strong>Berhasil!</strong> Situs anda telah sepenuhnya disetujui

    </div>

    <div class="alert alert-info">

      <strong>Info!</strong> Situs anda sedang tahap review

    </div>

    <div class="alert alert-warning">

      <strong>Warning!</strong> Website anda sedang tidak aman

    </div>

    <div class="alert alert-danger">

      <strong>Danger!</strong> Website anda telah terkena Malware

    </div>

Hasilnya dapat dilihat pada gambar dibawah ini.

Membuat Alert Link

Selanjutnya, kita dapat menambahkan sebuah link pada alert, class yang digunakan adalah "alert-link", class ini biasanya digunakan pada tag <a href=""> , dimana tag tersebut digunakan untuk membuat sebuah link, tentunya ini sangat berguna dimana user ingin melihat informasi detail dari alert yang muncul ketika melakukan aksi tertentu, contohnya dapat dilihat pada syntax dibawah ini.

<div class="alert alert-success">

      <strong>Berhasil!</strong> Situs anda telah sepenuhnya disetujui <a href="#" class="alert-link">Selengkapnya</a>

    </div>

    <div class="alert alert-info">

      <strong>Info!</strong> Situs anda sedang tahap review <a href="#" class="alert-link">Selengkapnya</a>

    </div>

    <div class="alert alert-warning">

      <strong>Warning!</strong> Komputer anda sedang tidak aman <a href="#" class="alert-link">Scan Sekarang</a>

    </div>

    <div class="alert alert-danger">

      <strong>Danger!</strong> Komputer anda telah terkena Malware <a href="#" class="alert-link">Scan Sekarang</a>

    </div>

Hasilnya dapat dilihat pada gambar dibawah ini.

Membuat Close Button Alert

Berikutnya, kita juga dapat membuat sebuah tombol close (X) pada alert, ini berguna saat dimana user menutup alert yang muncul saat melakukan sebuah aksi tertentu, untuk membuat sebuah tombol close pada alert, tambahkan class "alert-dismissable" pada tag <div> yang menjadi pembungkus alert, kemudian tambahkan class "close" dan data-dismis="alert" pada tag <a> atau <button>, contohnya dapat dilihat pada syntax berikut.

<div class="alert alert-success alert-dismissable">

      <a href="#" class="close" data-dimiss="alert">&times;</a>

      <strong>Berhasil!</strong> Situs anda telah sepenuhnya disetujui <a href="#" class="alert-link">Selengkapnya</a>

    </div>

    <div class="alert alert-info">

      <a href="#" class="close" data-dimiss="alert">&times;</a>

      <strong>Info!</strong> Situs anda sedang tahap review <a href="#" class="alert-link">Selengkapnya</a>

    </div>

    <div class="alert alert-warning">

      <a href="#" class="close" data-dimiss="alert">&times;</a>

      <strong>Warning!</strong> Komputer anda sedang tidak aman <a href="#" class="alert-link">Scan Sekarang</a>

    </div>

    <div class="alert alert-danger">

      <a href="#" class="close" data-dimiss="alert">&times;</a>

      <strong>Danger!</strong> Komputer anda telah terkena Malware <a href="#" class="alert-link">Scan Sekarang</a>

    </div> 

Hasilnya dapat dilihat pada gambar dibawah ini.

Implementasi

Pada tutorial sebelumnya, kita pernah membahas cara membuat button dengan Bootstrap, dalam alert, kita dapat menambahkan sebuah button, dapat dilihat pada gambar dibawah ini.

Baca Juga Cara Membuat Button Dengan Bootstrap

Syntaxnya seperti berikut.

<div class="alert alert-success alert-dismissable">

      <a href="#" class="close" data-dimiss="alert">&times;</a>

      <h2>Kabar Baik!</h2>

      <p>Hai <strong>Karis Maulana</strong>, Terima kasih telah bergabung bersama kami, sekarang anda dapat menayangkan iklan pada website anda dan mulailah merintis uang dari iklan yang ditampilkan, untuk lebih detailnya klik tombol Selengkapnya.</p>

      <a href="#" class="btn btn-success">Selengkapnya</a>

    </div>

Bagaimana, cukup mudah bukan menggunakan Bootstrap ?

Kita hanya tinggal menggunakan class class yang telah disediakan oleh Bootstrap sendiri. 

Kami minta pada kalian, jika ada kesalahan, kekurangan atau hal hal lainnya silahkan tuliskan komentar pada kolom komentar dibawah ya, Terima Kasih.

Semoga Bermanfaat.