Bootstrap 5 Toasts Basic
Bootstrap 5 Toasts Basic feature showcases brief alert notifications, resembling mobile and desktop push notifications. It elaborates on fundamental toast functionality, providing a user-friendly way to display important information to users.
Bootstrap 5 Toasts Basic Class: No special classes are used in Toasts Basic. The usage of display: flex in toast headers makes it simple to align content. You just need to have knowledge of Bootstrap 5 Toasts.
Syntax:
<div class="toast" role="alert">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<button type="button" class="btn-close"
data-bs-dismiss="toast">
</button>
</div>
<div class="toast-body">...</div>
</div>
Example 1: The following code demonstrates the Toasts basic using the Toasts Basic Bootstrap 5 properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width,
initial-scale=1"
/>
<link
href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body class="m-2">
<h2>Bootstrap 5 Toasts Basic</h2>
<button
type="button"
class="btn btn-primary"
id="myBtn"
>
Show Toast
</button>
<div class="toast" role="alert">
<div class="toast-header">
<strong class="me-auto">
w3wiki
</strong>
<small>GFG</small>
<button
type="button"
class="btn-close"
id="btn-closeit"
data-bs-dismiss="toast"
></button>
</div>
<div class="toast-body">
Hi Welcome to w3wiki!
</div>
</div>
<script>
$(document).ready(function () {
$("#myBtn").click(function () {
$("div:first").addClass(
"show"
);
});
});
$(document).ready(function () {
$("#btn-closeit").click(
function () {
$(
"div:first"
).removeClass("show");
}
);
});
</script>
</body>
</html>
Output:
Example 2: The following code demonstrates the Toasts basic with an image icon for a specific period of time using the Toasts Basic Bootstrap 5 properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body class="m-2">
<h2>Bootstrap 5 Toasts Basic</h2>
<button type="button"
class="btn btn-primary"
id="myBtn">
Show Toast
</button>
<div class="toast" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src=
"https://media.w3wiki.net/wp-content/cdn-uploads/20200617163105/gfg-logo.png"
class="rounded me-2" alt="LOGO"
style="width: 60px;">
<strong class="me-auto">
w3wiki
</strong>
</div>
<div class="toast-body">
It will automatically disappear
after some time.
</div>
</div>
<script>
$(document).ready(function () {
$('#myBtn').click(function () {
$('.toast').toast({
animation: false,
delay: 3000
});
$('.toast').toast('show');
});
});
</script>
</body>
</html>
Output:
Contact Us