Contoh Pesan Alert Bootstrap dan Cara Membuatnya

By | December 6, 2021

Alert merupakan salah satu kelebihan pengguna bootstrap yang akan kita bahas. Pada Tutorial bootsrap Part – 6 ini saya akan membuat contoh pesan alert bootstrap yang sering di dunakan.
Alerts atau bahasa Indonesianya itu peringatan juga tersedia di Bootstrap, sebut saja pemberitahuan / notifikasi ya. Bootstrap menyebutnya alerts karena ini bisa disesuaikan dengan bebas dan secara default nya saja sudah tersedia dalam beberapa versi warna agar dapat dipasang dengan cepat di situs Bootstrap. Misalnya menampilkan alerts berwarna merah (danger) untuk waspada atau error, warna hijau (success) untuk berhasil. Warna biru (info) dan Warna Oranye (warning).

Untuk membuat alerts di Bootstrap tidak sulit yang dibayangkan, cukup gunakan kodingan di bawah (pilih berdasarkan warna). Sebelum membahas lebih jauh mengenai alerts, perlu mengetahui contextual classes yang dapat digunakan untuk menyempurnakan alerts. Berikut ini 4 contextual class Bootstrap yang dapat diterapkan:

  1. Danger (Merah)
  2. Warning (oranye)
  3. Info (biru)
  4. Success (hijau)

Cara membuat alert dengan bootstrap

Membuat pesan alert ini sangatlah 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 seperti penjelasan di atas. Berikut contoh pesan alert :

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Part 2 : Membuat Alert dengan Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="bootstrap/js/jquery.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<body>
    <div class="container">
        <h1>Membuat Alert dengan Bootstrap | www.pemulungkode.com</h1>
        <hr>
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <strong>Holy guacamole!</strong> You should check in on some of those fields below.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            <strong>Holy guacamole!</strong> You should check in on some of those fields below.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <strong>Holy guacamole!</strong> You should check in on some of those fields below.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <strong>Holy guacamole!</strong> You should check in on some of those fields below.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    </div>
</body>
</html>

Cara Membuat Alert dengan Bootstrap

 

Sedikit penjelasan :

Contoh alert yang di atas sudah terdapat tombol close untuk menghapus atau menutup pesan alert. Untuk membuat tombol close pada pesan alert tambahkan.

<button type=”button” class=”btn-close” data-bs-dismiss=”alert” aria-label=”Close”></button>

Sekian pembahasan singkat mengenai Cara Membuat Alert dengan Bootstrap. dapat saya ambil kesimpulan bahwa Dengan menggunakan class alert pada bootstrap kita dapat membuat berbagai macam jenis pesan . Cukup dengan pamanggilan class kita sudah bisa melakukannya.

 

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

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *