Berikut adalah contoh untuk membuat pesan alert dengan menggunakan Bootstrap
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Pesan Alert</title>
</head>
<body>
<div class="alert alert-success" role="alert">
Ini adalah pesan alert dengan tipe success.
</div>
<div class="alert alert-info" role="alert">
Ini adalah pesan alert dengan tipe info.
</div>
<div class="alert alert-warning" role="alert">
Ini adalah pesan alert dengan tipe warning.
</div>
<div class="alert alert-danger" role="alert">
Ini adalah pesan alert dengan tipe danger.
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Ini adalah pesan alert dengan tipe success.
Ini adalah pesan alert dengan tipe info.
Ini adalah pesan alert dengan tipe warning.
Ini adalah pesan alert dengan tipe danger.
Alert Links
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Pesan Alert Links</title>
</head>
<body>
<div class="alert alert-primary" role="alert">
Ini adalah pesan alert dengan tautan.
<a href="#" class="alert-link">Klik di sini</a> untuk melihat lebih lanjut.
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Ini adalah pesan alert dengan tautan.
Klik di sini untuk melihat lebih lanjut.
Closing Alerts
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Pesan Alert Links</title>
</head>
<body>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Perhatian!</strong> Ini adalah pesan peringatan.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Perhatian! Ini adalah pesan peringatan.
Silakan salin kode di atas ke dalam file HTML Anda dan jalankan di browser untuk melihat hasilnya. Anda akan melihat empat pesan alert dengan tipe yang berbeda: success, info, warning, dan danger.
Pastikan Anda telah menyertakan link ke file CSS Bootstrap dan juga file JavaScript Bootstrap yang diperlukan untuk mengaktifkan komponen Bootstrap.
Dengan menggunakan kode di atas, Anda dapat membuat pesan alert dengan mudah dan menyesuaikannya sesuai kebutuhan Anda. Anda dapat mengubah tipe pesan, teks pesan, dan gaya pesan dengan mengubah kelas CSS yang diberikan.
Selamat mencoba!
Leave a Reply