Bootstrap Toast Example
What are toasts?
Toasts are similar to notifications, and they are lightweight and act as push notifications from mobile and desktop operating systems. They’re built using flexbox in Bootstrap. They can be easily aligned and positioned using CSS (Cascading Style Sheets).
Important Points:
- “autohide: false” is used to hide toasts.
- Util.js is required if toasts are built from JavaScript.
- They require very little markup.
How to make a Bootstrap Toast?
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>This is an example to demonstrate Bootstrap toasts.</h3>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="mr-auto">Bootstrap Toast</strong>
<small>Small Heading</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, everyone! You can put your toast messages here.
</div>
</div>
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
</body>
</html>
Output:
Generating a Bootstrap Toast using a Button
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Toast Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>This is an example to demonstrate Bootstrap toasts.</h3>
<p>Click on the button to generate a toast.</p>
<button type="button" class="btn btn-info" id="mytoastBtn">Show Toast</button>
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto">Bootstrap Toast</strong>
<small>small heading</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, everyone! You can put your toast messages here.
</div>
</div>
<script>
$(document).ready(function(){
$("#mytoastBtn").click(function(){
$('.toast').toast('show');
});
});
</script>
</body>
</html>
Output:
After clicking the button, the toast appears,
How to make a stack of Bootstrap Toasts?
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Toast Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>This is an example to demonstrate Bootstrap toasts.</h3>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="mr-auto">Bootstrap Toast</strong>
<small class="text-muted">Toast Example one!</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, everyone! You can put your toast messages here.
</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="mr-auto">Bootstrap Toast</strong>
<small class="text-muted">Toast Example one!</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, everyone! You can put your toast messages here.
</div>
</div>
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
</body>
</html>
Output:
How to change the position of the Bootstrap Toast?
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Toast Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>This is an example to demonstrate Bootstrap toasts.</h3>
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<div class="toast" style="position: absolute; top: 0; right: 0;">
<div class="toast-header">
<strong class="mr-auto">Bootstrap Toast</strong>
<small>Small Heading</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, everyone! You can put your toast messages here.
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
</body>
</html>
Output:
