Bootstrap 5 Toasts Placement
Last Updated :
20 Jan, 2023
Bootstrap 5 Toasts which are used to show the alert notifications. Toasts are brief alerts designed to resemble the push notifications made popular by mobile and desktop operating systems. The Toast Placement feature is used to set the position of the toast on the web page.
Bootstrap 5 Toasts Placement Class:
- position-absolute: This class is used to position the element relative to its closest positioned ancestor.
- top-*: This attribute set the position of the top alignment of the toast.
- bottom-*: This attribute set the position of the bottom alignment of the toast.
- start-*: This attribute set the position of the start alignment of the toast.
- end-*: This attribute set the position of the end alignment of the toast.
Syntax: The * can be any value from 0 to 50.
<div class="toast-container position-absolute top|bottom|start|end-*">
<div class="toast">
<div class="toast-header">
...
</div>
<div class="toast-body">
...
</div>
</div>
</div>
Example 1: The following code demonstrates the Toasts Placement feature and set the position of Toast at the top left, top center, and top right of the web page using the Toasts Placement Bootstrap 5 properties.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body class="m-3">
<h1 class="text-success"> GeeksforGeeks </h1>
<strong>Bootstrap 5 Toast Placement</strong>
<br>
<button type="button"
class="btn btn-primary"
id="myBtn">
Click Here
</button>
<div class="toast-container
position-absolute
top-0 start-0">
<div class="toast">
<div class="toast-header">
<strong>
Bootstrap 5 Toast Placement
</strong>
</div>
<div class="toast-body">
Position at Top left.
</div>
</div>
</div>
<div class="toast-container
position-absolute
top-0 start-50
translate-middle-x">
<div class="toast">
<div class="toast-header">
<strong>
Bootstrap 5 Toast Placement
</strong>
</div>
<div class="toast-body">
Position at Top Center.
</div>
</div>
</div>
<div class="toast-container
position-absolute top-0 end-0">
<div class="toast">
<div class="toast-header">
<strong>
Bootstrap 5 Toast Placement
</strong>
</div>
<div class="toast-body">
Position at Top Right.
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#myBtn').click(function() {
$('.toast').toast({
animation: false,
delay: 3000
});
$('.toast').toast('show');
});
});
</script>
</body>
</html>
|
Output:
Bootstrap 5 Toasts Placement
Example 2: The following code demonstrates the Toasts Placement feature and set the position of Toast at the middle left, middle center, and middle right of the web page using the Toasts Placement Bootstrap 5 properties.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body class="m-3">
<h1 class="text-success"> GeeksforGeeks </h1>
<strong>Bootstrap 5 Toast Placement</strong>
<br>
<button type="button"
class="btn btn-primary"
id="myBtn">
Click Here
</button>
<div class="toast-container
position-absolute
top-50 start-0
translate-middle-y">
<div class="toast">
<div class="toast-header">
<strong>Bootstrap 5 Toast Placement</strong>
</div>
<div class="toast-body">
Position at Middle left.
</div>
</div>
</div>
<div class="toast-container
position-absolute
top-50 start-50
translate-middle">
<div class="toast">
<div class="toast-header">
<strong>Bootstrap 5 Toast Placement</strong>
</div>
<div class="toast-body">
Position at Middle Center.
</div>
</div>
</div>
<div class="toast-container
position-absolute
top-50 end-0
translate-middle-y">
<div class="toast">
<div class="toast-header">
<strong>Bootstrap 5 Toast Placement</strong>
</div>
<div class="toast-body">
Position at Middle Right.
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#myBtn').click(function() {
$('.toast').toast({
animation: false,
delay: 3000
});
$('.toast').toast('show');
});
});
</script>
</body>
</html>
|
Output:
Bootstrap 5 Toasts Placement
Example 3: The following code demonstrates the Toasts Placement feature and set the position of Toast at the bottom left, bottom center, and bottom right of the web page using the Toasts Placement Bootstrap 5 properties.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body class="m-3">
<h1 class="text-success"> GeeksforGeeks </h1>
<strong>Bootstrap 5 Toast Placement</strong>
<br>
<button type="button"
class="btn btn-primary"
id="myBtn">
Click Here
</button>
<div class="toast-container
position-absolute
bottom-0 start-0">
<div class="toast">
<div class="toast-header">
<strong>Bootstrap 5 Toast Placement</strong>
</div>
<div class="toast-body">
Position at Bottom left.
</div>
</div>
</div>
<div class="toast-container
position-absolute
bottom-0 start-50
translate-middle-x">
<div class="toast">
<div class="toast-header">
<strong>Bootstrap 5 Toast Placement</strong>
</div>
<div class="toast-body">
Position at Bottom Center.
</div>
</div>
</div>
<div class="toast-container
position-absolute
bottom-0 end-0">
<div class="toast">
<div class="toast-header">
<strong>Bootstrap 5 Toast Placement</strong>
</div>
<div class="toast-body">
Position at Bottom Right.
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#myBtn').click(function() {
$('.toast').toast({
animation: false,
delay: 3000
});
$('.toast').toast('show');
});
});
</script>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/toasts/#placement
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...