Bootstrap Toast
Toast is a small message that appears on the screen. It is used for some feedback messages or Push notifications for mobile and desktop. For example; when you send a message through Gmail, you get a toast notification as sending message... Toast message remains for few seconds on the screen and does not block your work. It is just an information box with some text and icons. Now let us see how we can create a Toast using Bootstrap.
- Bootstrap Toast notifications are built with Flex, so you can easily align and position them anywhere on the screen.
- Toast is very flexible and requires very little markup. A single element can be used as Toast content.
- You can also add a dismiss button within a Toast.
- The toast needs to be wrap in an aria-live region and also should be assigned some role.
- If it is an important message like an error and needs some attention then assign role="alert" and aria-live="assertive".
- Otherwise use role="status" and aria-live="polite".
- Attribute aria-atomic="true" is used to ensure that the entire toast is always announced as a single atomic unit.
Example: Creating a Basic Toast Using Bootstrap 5
The .toast class is used to create a toast element. The toast contain a .toast-header class and .toast-body class. Here we have added a close button within the toast header. Add show with .toast class so that the toast notification appears on your screen.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="toast show" role="status" aria-live="polite" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap Toast</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
wow!! we have successfully created a Toast.
</div>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Stacking
We can add multiple toasts to the web page at the same time. Toast can be stacked one after another vertically by wrapping it into the container class.
Example: Stacking multiple toasts notifications
To stack multiple toast notifications one after use .toast-container and add multiple toasts within it. The toast will be vertically aligned with some spacing between them.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="toast-container">
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap Toast</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
This is a toast message.
</div>
</div>
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap Toast</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
This is another toast message.
</div>
</div>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Custom Toast
We can customize The Toast by adding additional components like buttons. It will enhance the Toast with some extra controls. We can also add icons to the Toast.
Example: Customizing Toast with buttons and icons
Here in the example, we have added an icon to the toast header using the SVG icon from bootstrap5. In addition to that, we have added two buttons of small size. One for some additional control and the second one for dismissing the toast.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="toast-container">
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bootstrap" viewBox="0 0 16 16">
<path d="M5.062 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062V12zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377H6.375z"/>
<path d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z"/>
</svg>
<strong class="me-auto">Bootstrap Toast</strong>
</div>
<div class="toast-body">
This is a toast message.
</div>
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">Take action</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
</div>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Color in Toast
Colors can be added to the Toast using Bootstrap 5 color and background utility class. We can also add colors to the textual content within the Toast.
Example: Adding colors to the Toast
Here in the example, we have added the .bg-success color to the Toast background and .text-white color to the text. The .border-0 class is used to remove the border and add a crisp edge. The header has been removed and the .btn-close-white class is added to the close button..
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container mt-3">
<div class="toast text-white bg-success border-0 show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
message successfuly sent...
</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>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Placement of Toast
The Bootstrap Toast can be placed anywhere on the screen. Use the Custom CSS to place the toast on the screen. We can also use the Flex utility class to align the toast on the screen.
Example: Placing the Toast to Top center
Here in the example, the Toast is placed to the Top Center using Absolute-position and top-0 start-50 translate-middle-x. Also, the relative-position class should be added within the .toast class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="toast show position-absolute top-0 start-50 translate-middle-x" role="alert" aria-live="assertive" aria-atomic="true" class="position-relative">
<div class="toast-header">
<strong class="me-auto">Bootstrap Toast</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Toast to center the top end.
</div>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Example: Using Flex utility to align Toast
Toast can be aligned using the Flex utility class. To do so first add the Flex container and then add the Toast within the container. Here, we have used the .d-flex class with the .justify-content-end class to align it to the left. The text within the Toast is aligned to the center using the .align-items-center utility.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-end align-items-center w-100">
<!-- Then put toasts within -->
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap Toast</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Toast alignment using Flex.
</div>
</div>
</div>
</body>
</html>
Output:
Conclusion
Now we know how to create a Toast which we generally see at the top of our mobile phone or desktop. It can be used for news feeds, alerts, etc. Bootstrap 5 allows you to easily add a Toast within the web page without thinking about how to custom styles of The Toast. Further, the Toast can be easily placed anywhere on the screen. You have options to customize the color schemes of the Toast.
