Cara menggunakan alert = bootstrap

Alert pada Bootstrap merupakan pesan notifikasi atau semacam pesan pemberitahuan, alert merupakan salah satu komponen penting dalam sebuah aplikasi atau website.

Table of Contents Show

Membuat Alert dengan Bootstrap 4
Posisi Text Alert
Pesan Alert Dengan Tombol Close

Biasanya pesan notifikasi atau pesan alert ini digunakan untuk memberikan respon pesan ke pengguna aplikasi.

Misalnya ketika pengguna melakukan login, jika username dan password yang diinput oleh pengguna salah, tentu akan ada pesan notifikasi yang muncul dengan tujuan untuk memberitahukan pengguna bahwa login gagal, karena username dan password yang diinputkan salah.

Ada banyak jenis alert yang disediakan di bootstrap 4. diantaranya adalah :

.alert-success
Pesan alert ini berwarna hijau, biasanya digunakan untuk notifikasi yang bersifat positif, misalnya memberitahukan suatu proses yang berhasil dilakukan.
.alert-primary
Pesan alert primary ini adalah pesan notifikasi yang berwarna biru.
.alert-secondary
Pesan alert secondary adalah pesan notifikasi yang berwarna abu-abu.
.alert-danger
Pesan notifikasi ini berwatna merah, biasanya digunakan untuk pemberitahuan proses yang gagal dilakukan.
.alert-warning
Pesan alert warning adalah pesan yang yang berwarna kuning.
.alert-info
Pesan alert ini biasanya digunakan untuk membuat atau menampilkan pesan pemberitahuan yang berupa informasi kepada pengguna dan memiliki warna biru terang.
.alert-light
Pesan notifikasi ini berwarna terang, hampir ke abu-abuan.
.alert-dark
Pesan notifikasi alert dark adalah notifikasi yang berwarna gelap.

Jenis alert di atas bukanlah suatu ketentuan yang harus diikuti, penjelasan di atas hanya gambaran tentang penggunaan alert bootstrap pada umumnya.

Membuat Alert dengan Bootstrap 4

Untuk cara membuat pesan notifikasi alert menggunakan bootstrap, pertama buat element <div> .. </div>. dan kita hanya tinggal menuliskan class .alert di elemen <div> tersebut.

Kemudian lanjutkan dengan menuliskan salah satu class alert seperti di atas tadi sesuai dengan jenis alert yang ingin dibuat.

Contoh :

alert.php

<!doctype html>
<html>
    <head>
        <!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
        <link rel="stylesheet" href="../assets/css/bootstrap.css">
        <title>Tutorial Alert Dengan Bootstrap 4</title>
    </head>

    <body>
        <div class="container">
            <center>
                <h3>Tutorial Alert Dengan Bootstrap 4</h3>
            </center>

            <!-- Contoh pesan notifikasi alert menggunakan bootstrap 4 -->
            <div class="alert alert-success">
                Contoh alert success!
            </div>

            <div class="alert alert-primary">
                Contoh alert primary!
            </div>

            <div class="alert alert-secondary">
                Contoh alert secondary!
            </div>

            <div class="alert alert-danger">
                Contoh alert danger!
            </div>

            <div class="alert alert-warning">
                Contoh alert warning!
            </div>

            <div class="alert alert-info">
                Contoh alert info!
            </div>

            <div class="alert alert-light">
                Contoh alert light!
            </div>

            <div class="alert alert-dark">
                Contoh alert dark!
            </div>
        </div>

        <script src="assets/js/jquery.js"></script>
        <script src="assets/js/popper.js"></script>
        <script src="assets/js/bootstrap.js"></script>
    </body>
</html>

Hasilnya :

Posisi Text Alert

Kita juga bisa mengubah posisi text pada pesan alert, untuk memindahkan text ke tengah, kita bisa tambahkan class .text-center, untuk memindahkan text ke kanan, tambahkan class .text-right.

Contoh :

<!doctype html>
<html>
    <head>
        <!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
        <link rel="stylesheet" href="../assets/css/bootstrap.css">
        <title>Tutorial Alert Dengan Bootstrap 4</title>
    </head>

    <body>
        <div class="container">
            <center>
                <h3>Tutorial Alert Dengan Bootstrap 4</h3>
            </center>

            <!-- Contoh pesan notifikasi alert menggunakan bootstrap 4 -->
            <div class="alert alert-success text-center"">
                Contoh alert success, posisinya di tengah
            </div>

            <div class="alert alert-primary text-right">
                Contoh alert primary, posisinya di kanan
            </div>

            <div class="alert alert-secondary text-left">
                Contoh alert secondary, , posisinya di kiri
            </div>

            <div class="alert alert-danger">
                Contoh alert danger!
            </div>

            <div class="alert alert-warning">
                Contoh alert warning!
            </div>

            <div class="alert alert-info">
                Contoh alert info!
            </div>

            <div class="alert alert-light">
                Contoh alert light!
            </div>

            <div class="alert alert-dark">
                Contoh alert dark!
            </div>
        </div>

        <script src="../assets/js/jquery.js"></script>
        <script src="../assets/js/popper.js"></script>
        <script src="../assets/js/bootstrap.js"></script>
    </body>
</html>

Hasilnya :

Perhatikan untuk posisi class text-left dengan tanpa class tersebut posisinya sama saja, jadi untuk posisi defaultnya berada di kiri, jadi untuk posisi dikiri kita bisa tanpa class tersebut.

Pesan Alert Dengan Tombol Close

Kita juga bisa menambahkan tombol close pada pesan alert, ketika pengguna ingin menutup atau menghilangkan pesan alert tersebut, pengguna tinggal klik pada tombol close.

Contoh :

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Tutorial Alert Dengan Bootstrap 4</title> 
        <!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing --> 
        <link rel="stylesheet" href="assets/css/bootstrap.css">
        <script type="text/javascript" src="assets/js/jquery.js"></script>
        <script type="text/javascript" src="assets/js/bootstrap.js"></script> 
    </head>  
        
    <body> 
        <div class="alert alert-primary alert-dismissible fade show"> 
            <strong>Halo!</strong> 
            Selamat datang di www.agussuratna.net. 
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
                <span aria-hidden="true">&times;</span> 
            </button> 
        </div> 
        
        <div class="alert alert-danger alert-dismissible fade show"> 
            <strong>Ini contoh alert dengann tombol close.</strong> 
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
                <span aria-hidden="true">&times;</span> 
            </button> 
        </div> 
    </body> 
</html>

Pada syntax di atas, kita menggunakan class .alert-dismissable untuk membuat alert yang mempunyai tombol close, kemudian class .fade berguna sebagai efek pada saat alert menghilang. class .fade ini akan membuat efek memudar secara perlahan sampai alert menghilang, sedangkan class .show berguna sebagai menampilkan alert secara default dan terakhir kita buat tombol closenya, pada saat diklik otomatis alert akan ditutup atau disembunyikan.

Hasilnya :

Referensi :