Bootstrap 5 Toasts
Last Updated :
03 Feb, 2023
Bootstrap 5 Toasts are notifications or messages which the users receive whenever they perform certain actions. They can easily be customized.
- Overview: Toasts need to be initialized. Apply autohide: false so that the toasts don’t automatically hide.
- Placement: You can place toasts as you want. The top right and top middle positions are often used for notifications.
- Accessibility: To avoid small interruptions caused by toasts to the users, we should wrap toasts in an aria-live region. Changes to live regions are announced automatically by screen readers. We can set the aria-live=“assertive” for the important messages and role=”status”, and aria-live=”polite” for the normal message.
- Sass variables: They have a pre-defined list of variables that can be changed as per usage.
- Usage: It uses JavaScript to initialize toasts.
var toastElementList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElementList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
- Events: Below is the list of event types and its description.
- show.bs.toast: It fires when the show instance method is called.
- shown.bs.toast: It fires when the toast is visible to the user.
- hide.bs.toast: It fires when the hide instance method is called.
- hidden.bs.toast: It fires when toast has finished being hidden from the user.
Syntax:
<div class="toast show">
<div class="toast-header">
<strong class="me-auto">...</strong>
<button type="button" class="btn-close"
data-bs-dismiss="toast">
...
</button>
</div>
<div class="toast-body">
<p>...</p>
</div>
</div>
Example 1: It is a basic toast. They are as flexible as you need and require very little markup.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body class="m-3">
<div class="text-center">
<h1 class="text-success">GeeksforGeeks</h1>
<h2>Bootstrap 5 Toasts</h2>
</div>
<br><br>
<div class="toast show">
<div class="toast-header">
<strong class="me-auto">GFG</strong>
<small>5 mins ago</small>
<button type="button" class="btn-close"
data-bs-dismiss="toast">
</button>
</div>
<div class="toast-body">
<p>Hackathon at 9pm</p>
</div>
</div>
</body>
</html>
|
Output:
Example 2: They are translucent to match the background and you can stack toasts by wrapping them together using the .toast-container class.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body class="m-3">
<div style="height:100vh;">
<div class="text-center">
<h1 class="text-success">GeeksforGeeks</h1>
<h2 style="color:white;">
Bootstrap 5 Toasts
</h2>
</div>
<br><br>
<div class="toast-container">
<div class="toast show">
<div class="toast-header">
<strong class="me-auto">
GFG</strong>
<small>just now</small>
<button type="button" class="btn-close"
data-bs-dismiss="toast">
</button>
</div>
<div class="toast-body">
<p>Time to practice some DSA</p>
</div>
</div>
<div class="toast show">
<div class="toast-header">
<strong class="me-auto">GFG</strong>
<small>5 mins ago</small>
<button type="button" class="btn-close"
data-bs-dismiss="toast">
</button>
</div>
<div class="toast-body">
<p>Hackathon at 9pm</p>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
References: https://getbootstrap.com/docs/5.0/components/toasts/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...