Pesan Alert Menggunakan Bootstrap

lebakcyber.net – Pesan alert menggunakan Bootstrap. Oke jadi pada kesempatan kali ini kita akan mencoba salah satu fitur yang disediakan oleh Bootstrap yaitu menampilkan pesan alert dengan Bootstrap.

Class yang bisa digunakan untuk menampilkan pesan alert sudah disediakan oleh Bootstrap dan dapat digunakan dengan mudah karena kita hanya perlu memanggil class yang ada pada bootstrap untuk menggunakannya.

Untuk menampilkan sebuah pesan alert pada Bootstrap kita hanya perlu menambahkan class “alert” yang maksudnya kita akan menggunakan fitur alert tersebut pada Bootstrap.

Ada beberapa jenis alert yang bisa digunakan dan juga telah disediakan oleh Bootstrap, yaitu :

alert-info = Dapat digunakan untuk menampilkan sebuah pesan alert dengan warna biru dan biasanya pesan alert ini digunakan pada saat membuat sebuah pesan yang berisi informasi.
alert-success = Dapat digunakan untuk menampilkan sebuah pesan alert dengan warna hijau dan pesan alert ini biasanya digunakan pada saat membuat sebuah informasi kalau pesan sukses.
alert-danger = Dapat digunakan untuk menampilkan sebuah pesan alert dengan warna merah dan biasanya pesan alert ini digunakan pada saat membuat sebuah pesan informasi yang gagal.
alert-warning = Dapat digunakan untuk menampilkan sebuah pesan alert dengan warna kuning dan biasanya pesan ini digunakan pada saat membuat sebuah pesan yang berisi peringatan.

Sekarang kita akan coba langsung praktekan bagaimana cara menampilkan sebuah pesan alert dengan menggunakan Bootstrap. Silahkan buat sebuah file index.html lalu masukan perintah dibawah ini :

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Alert Dengan Bootstrap - lebakcyber.net</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>		
    <div class="container">
        <h1>Dibawah ini adalah contoh pesan alert memakai Bootstrap</h1> 
        <div class="alert alert-info">Contoh Dari Alert Info</div>
        <div class="alert alert-success">Contoh Dari Alert Sukses</div>
        <div class="alert alert-danger">Contoh Dari Alert Gagal</div>
        <div class="alert alert-warning">Contoh Dari Alert Peringatan</div>
    </div>
    <div><a href="lebakcyber.net">lebakcyber.net</a></div>
</div>
</body>
</html>

Nanti hasilnya akan seperti gambar dibawah ini :

Oke sangat mudah bukan bagaimana cara membaut sebuah pesan alert dengan memakai Bootstrap. Dan sekarang kita akan mencoba menambahkan sebuah tombol close pada pesan alert yang dibuat menggunakan Bootstrap tersebut agar pesan dapat ditutup atau di close.

Silahkan buat sebuah file index.html yang baru lalu masukan perintah dibawah ini :

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Alert Dengan Bootstrap - lebakcyber.net</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>		
    <div class="container">
        <h3>Dibawah ini adalah contoh pesan alert dengan tombol close memakai Bootstrap</h3>
        <div class="alert alert-info">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            Contoh Dari Alert Info
        </div>
        <div class="alert alert-success fade in">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            Contoh Dari Alert Sukses
        </div>
        <div class="alert alert-danger fade in">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            Contoh Dari Alert Gagal
        </div>
        <div class="alert alert-warning">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            Contoh Dari Alert Peringatan
        </div>
    </div>
    <div><a href="lebakcyber.net">lebakcyber.net</a></div>
</div>
</body>
</html>

Nanti hasilnya seperti gambar dibawah ini :

Pada gambar diatas bisa kita lihat kalau sudah terdapat sebuah tombol close yang bisa digunakan untuk menutup pesan alert yang ditampilkan. Kita harus menambahkan perintah dibawah ini untuk membuat sebuah tombol close pada pesan alert yang ditampilkan :

<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> Contoh Dari Alert Gagal

Oke jadi seperti itulah bagaimana cara membuat sebuah pesan alert dengan memakai Bootstrap dan juga bagaimana cara untuk menambakan tombol close pada pesan alert tersebut agar pesan alert bisa dihapus.

Semoga tutorial sederhana ini dapat bermanfaat dan jangan lupa untuk selalu berkunjung ke lebakcyber.net untuk mendapatkan tutorial belajar Bootstrap lainnya.

Lebak Cyber Tips dan Trik Komputer

Pesan Alert Menggunakan Bootstrap