Belajar Bootstrap #56 Toats di Bootstrap
Ahmad Dika Zulfahmi
20 Maret 2025
Apa Itu Toasts di Bootstrap?
Toasts adalah notifikasi ringan yang muncul di layar untuk memberikan informasi kepada pengguna, mirip dengan push notification pada sistem operasi.
Toasts memiliki fitur berikut:
Ringan & fleksibel: Bisa ditempatkan di mana saja.
Dapat disesuaikan: Bisa diubah tampilannya, ditumpuk, atau diberi warna.
Opt-in: Harus diaktifkan secara manual dengan JavaScript.
Otomatis menghilang (bisa diatur agar tetap terlihat).
Cara Menggunakan Toasts
1. Basic Toast (Notifikasi Sederhana)
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toats bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Tombol untuk menampilkan Toast -->
<button type="button" class="btn btn-primary" id="showToastBtn">Show Toast</button>
<!-- Container Toast -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="basicToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small>Just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, this is a basic toast message!
</div>
</div>
</div>
<!-- JavaScript untuk menampilkan Toast -->
<script>
document.getElementById("showToastBtn").addEventListener("click", function () {
var toast = new bootstrap.Toast(document.getElementById("basicToast"));
toast.show();
});
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
berikut hasilnya:
2. toast dengan warna
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Toast - Color</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Tombol untuk menampilkan Toast -->
<button type="button" class="btn btn-primary" id="showToastBtn">Show Toast</button>
<!-- Toast dengan Warna -->
<div class="position-fixed bottom-0 end-0 p-3">
<div id="coloredToast" class="toast hide text-white bg-success border-0" role="alert" aria-live="assertive"
aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
✅ Berhasil! Ini adalah notifikasi dengan warna hijau.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Menampilkan toast saat tombol diklik
document.getElementById('showToastBtn').addEventListener('click', function () {
var toastEl = new bootstrap.Toast(document.getElementById('coloredToast'));
toastEl.show();
});
</script>
</body>
</html>
berikut hasilnya:
3. toast dengan tombol aksi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toast dengan Tombol Aksi</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Tombol untuk menampilkan Toast -->
<button type="button" class="btn btn-primary" id="showToastBtn">Show Toast</button>
<!-- Toast dengan Tombol Aksi -->
<div class="position-fixed bottom-0 end-0 p-3">
<div id="actionToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Notifikasi</strong>
<small class="text-muted">Baru saja</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
🔔 Anda memiliki pesan baru!
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-success btn-sm" id="actionButton">Lihat</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Tutup</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Menampilkan toast saat tombol diklik
document.getElementById('showToastBtn').addEventListener('click', function () {
var toastEl = new bootstrap.Toast(document.getElementById('actionToast'));
toastEl.show();
});
// Event untuk tombol aksi
document.getElementById('actionButton').addEventListener('click', function () {
alert("Anda mengklik tombol Lihat!");
});
</script>
</body>
</html>
berikut hasilnya:
4. stacking toast
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stacking Toasts</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="toast-container position-fixed top-0 end-0 p-3">
<div class="toast show" role="alert">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small>Just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">This is the first toast message.</div>
</div>
<div class="toast show mt-2" role="alert">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small>2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">This is the second toast message.</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById('showToastsBtn').addEventListener('click', function () {
showToast("🔔 Notifikasi 1", "Ini adalah pesan pertama!");
showToast("⚠️ Peringatan!", "Jangan lupa menyimpan pekerjaan Anda.");
});
function showToast(title, message) {
// Buat elemen toast
let toastEl = document.createElement("div");
toastEl.className = "toast show";
toastEl.setAttribute("role", "alert");
toastEl.setAttribute("aria-live", "assertive");
toastEl.setAttribute("aria-atomic", "true");
// Tambahkan isi toast
toastEl.innerHTML = `
<div class="toast-header">
<strong class="me-auto">${title}</strong>
<small class="text-muted">Baru saja</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">${message}</div>
`;
// Tambahkan ke container
document.getElementById("toastContainer").appendChild(toastEl);
// Inisialisasi dan tampilkan toast
var toast = new bootstrap.Toast(toastEl);
toast.show();
// Hapus toast setelah beberapa detik
setTimeout(() => {
toastEl.remove();
}, 5000);
}
</script>
</body>
</html>
berikut hasilnya:
5. mengatur posisi toast
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toast dengan Posisi Dinamis</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Pilihan Posisi -->
<select id="positionSelect" class="form-select w-auto m-3">
<option value="top-0 start-0">Kiri Atas</option>
<option value="top-0 end-0">Kanan Atas</option>
<option value="bottom-0 start-0">Kiri Bawah</option>
<option value="bottom-0 end-0" selected>Kanan Bawah</option>
</select>
<!-- Tombol untuk menampilkan toast -->
<button class="btn btn-primary m-3" id="showToastBtn">Tampilkan Toast</button>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById('showToastBtn').addEventListener('click', function () {
let position = document.getElementById('positionSelect').value;
showToast("📢 Notifikasi", "Posisi toast: " + position, position);
});
function showToast(title, message, positionClass) {
// Hapus container sebelumnya
let oldContainer = document.getElementById("toastContainer");
if (oldContainer) oldContainer.remove();
// Buat container baru dengan posisi yang dipilih
let container = document.createElement("div");
container.className = `position-fixed ${positionClass} p-3`;
container.style.zIndex = "11";
container.id = "toastContainer";
// Tambahkan container ke body
document.body.appendChild(container);
// Buat toast
let toastEl = document.createElement("div");
toastEl.className = "toast show";
toastEl.setAttribute("role", "alert");
toastEl.setAttribute("aria-live", "assertive");
toastEl.setAttribute("aria-atomic", "true");
toastEl.innerHTML = `
<div class="toast-header">
<strong class="me-auto">${title}</strong>
<small class="text-muted">Baru saja</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">${message}</div>
`;
// Tambahkan toast ke container
container.appendChild(toastEl);
// Tampilkan toast
var toast = new bootstrap.Toast(toastEl);
toast.show();
// Hapus toast setelah beberapa detik
setTimeout(() => {
toastEl.remove();
}, 5000);
}
</script>
</body>
</html>
berikut hasilnya:
Artikel Lainnya Dengan Kategori Terkait :
1. Belajar Bootstrap #1 Fundamental Bootstrap
2. Belajar Bootstrap #10 CSS Variables Bootstrap
3. Belajar Bootstrap #11 Optimize Bootstrap
4. Belajar Bootstrap #12 Mengenal sistem kolom di Bootstrap
5. Belajar Bootstrap #13 Panduan lengkap gutters di Bootstrap
6. Belajar Bootstrap #14 Penjelasan sederhana utilities untuk layout di Bootstrap
7. Belajar Bootstrap #15 Penjelasan Z-index dalam Bootstrap
8. Belajar Bootstrap #16 Reboot Bootstrap
9. Belajar Bootstrap #17 Typography di Bootstrap
10. Belajar Bootstrap #18 Gambar di Bootstrap
11. Belajar Bootstrap #19 Table di Bootstrap part 1
12. Belajar Bootstrap #2 Alasan menggunakan Bootstrap
13. Belajar Bootstrap #20 Table di Bootstrap part 2
14. Belajar Bootstrap #21 Bootstrap Figures
15. Belajar Bootstrap #22 Penjelasan Form di Bootstrap
16. Belajar Bootstrap #23 Form Controls di Bootstrap
17. Belajar Bootstrap #24 Penjelasan Bootstrap Select
18. Belajar Bootstrap #25 Checkbox dan Radio Button di Bootstrap
19. Belajar Bootstrap #26 Range input di Bootstrap
20. Belajar Bootstrap #27 Input Group di Bootstrap
21. Belajar Bootstrap #28 Penjelasan Floating Labels di Bootstrap
22. Belajar Bootstrap #29 Layout Form di Bootstrap
23. Belajar Bootstrap #3 Persiapan Sebelum Belajar Bootstrap
24. Belajar Bootstrap #30 Validasi Form di bootstrap
25. Belajar Bootstrap #31 Accordion di Bootstrap
26. Belajar Bootstrap #32 Apa itu Bootstrap Alerts?
27. Belajar Bootstrap #33 Apa itu Badges di Bootstrap?
28. Belajar Bootstrap #34 Apa itu Breadcrumb di Bootstrap?
29. Belajar Bootstrap #35 Penggunaan Tombol (Buttons) di Bootstrap
30. Belajar Bootstrap #36 Button Group di Bootstrap
31. Belajar Bootstrap #37 Cards di Bootstrap part 1
32. Belajar Bootstrap #38 Cards di Bootstrap part 2
33. Belajar Bootstrap #39 Cards di Bootstrap part 3
34. Belajar Bootstrap #40 Apa itu Carousel di bootstrap
35. Belajar Bootstrap #41 Close Button di Bootstrap
36. Belajar Bootstrap #42 Apa itu Collapse di Bootstrap
37. Belajar Bootstrap #43 Dropdowns di Bootstrap part 1
38. Belajar Bootstrap #44 Dropdowns di Bootstrap part 2
39. Belajar Bootstrap #45 List Group di Bootstrap
40. Belajar Bootstrap #46 Modal di Bootstrap
41. Belajar Bootstrap #47 Navs dan tabs di Bootstrap
42. Belajar Bootstrap #48 Navbar di Bootstrap part 1
43. Belajar Bootstrap #49 Navbar di Bootstrap part 2
44. Belajar Bootstrap #5 Menggunnakan Bootstrap lewat unduhan manual
45. Belajar Bootstrap #50 Offcanvas di Bootstrap
46. Belajar Bootstrap #51 Pagination di Bootstrap
47. Belajar Bootstrap #52 Popover di Bootstrap
48. Belajar Bootstrap #53 Progress di Bootstrap
49. Belajar Bootstrap #54 Apa itu Scrollspy
50. Belajar Bootstrap #55 Bootstrap Spinners
51. Belajar Bootstrap #56 Toats di Bootstrap
52. Belajar Bootstrap #57 Tooltips di Bootstrap
53. Belajar Bootstrap #58 Clearfix dalam Bootstrap
54. Belajar Bootstrap #59 Colored Links di Bootstrap
55. Belajar Bootstrap #6 Cara Membuat Container Pada Bootstrap
56. Belajar Bootstrap #60 Ratios di Bootstrap
57. Belajar Bootstrap #61 Position Bootstrap
58. Belajar Bootstrap #62 Visually Hidden Bootstrap
59. Belajar Bootstrap #63 Stretched Link Bootstrap
60. Belajar Bootstrap #64 Text Truncation di Bootstrap
61. Belajar Bootstrap #65 Utility API di Bootstrap
62. Belajar Bootstrap #66 Background di Bootstrap
63. Belajar Bootstrap #67 Border di Bootstrap
64. Belajar Bootstrap #68 Bootstrap Colors
65. Belajar Bootstrap #69 Display Property di Bootstrap
66. Belajar Bootstrap #7 Memahami dan menerapkan grid
67. Belajar Bootstrap #70 Flexbox di Bootstrap
68. Belajar Bootstrap #71 Float Utility di Bootstrap
69. Belajar Bootstrap #72 Bootstrap Interactions
70. Belajar Bootstrap #73 Overflow di Bootstrap
71. Belajar Bootstrap #74 Position dalam Bootstrap
72. Belajar Bootstrap #75 Shadows di Bootstrap
73. Belajar Bootstrap #76 Bootstrap Sizing
74. Belajar Bootstrap #77 Spacing di Bootstrap
75. Belajar Bootstrap #78 Text Utilities di Bootstrap
76. Belajar Bootstrap #79 Vertical Alignment di Bootstrap
77. Belajar Bootstrap #8 Warna Tema dan Cara Penggunaannya
78. Belajar Bootstrap #80 Visibility di Bootstrap
DANNN - 17 Juni 2026
Spill Hasil Pembuatan Landing Page Barbershop yang Menyesuaikan Branding Bisnis
DANNN - 12 Juni 2026
Kenapa Banyak CBT Masih Mudah Dicurangi? Pentingnya Sistem Ujian yang Mampu Mendeteksi Aktivitas Peserta
DANNN - 11 Juni 2026
Ujian, Koreksi, dan Rekap Nilai dalam Satu Sistem Minarsih Exam