Bootstrap 4 toasts are lightweight, customizable notifications that appear as small pop-up messages.
They are commonly used to provide alerts, success messages, or feedback to users. Toasts support autohide, manual dismissal, and various positioning options.
What This Tutorial Covers:
- Basic Bootstrap 4 toast
- Toast with autohide and manual dismiss
- Toast positioning (top-right, bottom-right, etc.)
- Stacking multiple toasts
- Customizing toast appearance with CSS
- Triggering toast with JavaScript or button clicks
1. Basic Bootstrap 4 Toast
To create a toast, use:
- .toast as the main container
- .toast-header for the title section
- .toast-body for the message content
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Toast</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<button class="btn btn-primary" id="showToast">Show Toast</button>
<div class="toast" id="myToast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto">Notification</strong>
<small>Just now</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
This is a basic Bootstrap toast message.
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#showToast").click(function(){
$("#myToast").toast("show");
});
});
</script>
</body>
</html>
Explanation:
- .toast is the main container.
- .toast-header holds the title and close button.
- .toast-body contains the message text.
- data-autohide=”false” prevents the toast from closing automatically.
- Clicking the button triggers the toast with JavaScript.
2. Toast with Autohide and Manual Dismiss
Toasts automatically disappear after a few seconds using data-delay.
Example:
<div class="toast" id="autoToast" data-delay="3000">
<div class="toast-header">
<strong class="mr-auto">Auto-hide Toast</strong>
<small>Just now</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
This toast will disappear in 3 seconds.
</div>
</div>
<script>
$(document).ready(function(){
$("#autoToast").toast("show");
});
</script>
Explanation:
- data-delay=”3000″ makes the toast disappear after 3 seconds.
3. Toast Positioning (Top-Right, Bottom-Right, etc.)
You can position toasts anywhere using position: fixed.
Example: Top-Right Toast
<div style="position: fixed; top: 20px; right: 20px;">
<div class="toast" id="topRightToast">
<div class="toast-header">
<strong class="mr-auto">Top Right</strong>
<button type="button" class="close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
This toast appears at the top right.
</div>
</div>
</div>
Example: Bottom-Right Toast
<div style="position: fixed; bottom: 20px; right: 20px;">
<div class="toast" id="bottomRightToast">
<div class="toast-header">
<strong class="mr-auto">Bottom Right</strong>
<button type="button" class="close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
This toast appears at the bottom right.
</div>
</div>
</div>
Explanation:
- position: fixed; top: 20px; right: 20px; positions the toast at the top-right.
- position: fixed; bottom: 20px; right: 20px; positions the toast at the bottom-right.
4. Stacking Multiple Toasts
Bootstrap allows multiple toasts to be displayed at the same time.
Example:
<div style="position: fixed; top: 20px; right: 20px;">
<div class="toast" id="toast1">
<div class="toast-header">
<strong class="mr-auto">Toast 1</strong>
<button type="button" class="close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
First toast message.
</div>
</div>
<div class="toast mt-2" id="toast2">
<div class="toast-header">
<strong class="mr-auto">Toast 2</strong>
<button type="button" class="close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
Second toast message.
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#toast1, #toast2").toast("show");
});
</script>
Explanation:
- Each toast has a unique ID.
- .mt-2 adds spacing between toasts.
5. Customizing Toast Appearance with CSS
You can change the background color, border, and font styles.
Example:
<style>
.custom-toast {
background-color: #ff5733;
color: white;
border-radius: 10px;
}
</style>
<div class="toast custom-toast" id="customToast">
<div class="toast-header">
<strong class="mr-auto">Custom Toast</strong>
<button type="button" class="close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
This toast has a custom background.
</div>
</div>
<script>
$(document).ready(function(){
$("#customToast").toast("show");
});
</script>
Explanation:
- .custom-toast changes the background color and border radius.
6. Triggering Toast with JavaScript
You can control toasts manually using JavaScript.
Example:
<button class="btn btn-primary" id="manualToastBtn">Show Toast</button>
<div class="toast" id="manualToast">
<div class="toast-header">
<strong class="mr-auto">Manual Toast</strong>
<button type="button" class="close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
This toast was triggered manually.
</div>
</div>
<script>
$(document).ready(function(){
$("#manualToastBtn").click(function(){
$("#manualToast").toast("show");
});
});
</script>
Explanation:
- Clicking #manualToastBtn triggers the toast.
Conclusion
Bootstrap 4 toasts are powerful, flexible, and lightweight notification components. They can be automatically dismissed, stacked, positioned, and triggered via JavaScript.
