Menu
I'm trying to create a snackbar / toast version with Bootstrap 4. I start with this tutorial from w3schools.
Updated: I was trying to implement a custom snackbar or toast for Bootstrap 4 but, right now, it isn't necessary beacause Bootstrap 4 includes this option from version 4.2 as @Zim says.
783
For setting the toast options via data attributes, just append the option name to data-bs- , such as data-bs-autohide="false" , data-bs-delay="3000" , etc. Apply a CSS fade transition to the toast. Auto hide the toast. Delay hiding the toast (ms).
The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.
I (emphasis = full disclosure) created a jQuery plugin for the toasts components to make them easier to use, the repo can be found here. The purpose was to be able to call the toasts on the fly through JavaScript.
Toast
$.toast({
title: 'Toast',
subtitle: '11 mins ago',
content: 'Hello, world! This is a toast message.',
type: 'info',
delay: 5000
});
Snack
$.toast({
title: 'A small bitesize snack, not a toast!',
type: 'info',
delay: 5000
});
Live Example
(function(b){b.toast=function(a,h,g,l,k){b("#toast-container").length||(b("body").prepend('<div id="toast-container" aria-live="polite" aria-atomic="true"></div>'),b("#toast-container").append('<div id="toast-wrapper"></div>'));var c="",d="",e="text-muted",f="",m="object"===typeof a?a.title||"":a||"Notice!";h="object"===typeof a?a.subtitle||"":h||"";g="object"===typeof a?a.content||"":g||"";k="object"===typeof a?a.delay||3E3:k||3E3;switch("object"===typeof a?a.type||"":l||"info"){case "info":c="bg-info";
f=e=d="text-white";break;case "success":c="bg-success";f=e=d="text-white";break;case "warning":case "warn":c="bg-warning";f=e=d="text-white";break;case "error":case "danger":c="bg-danger",f=e=d="text-white"}a='<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="'+k+'">'+('<div class="toast-header '+c+" "+d+'">')+('<strong class="mr-auto">'+m+"</strong>");a+='<small class="'+e+'">'+h+"</small>";a+='<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">';
a+='<span aria-hidden="true" class="'+f+'">×</span>';a+="</button>";a+="</div>";""!==g&&(a+='<div class="toast-body">',a+=g,a+="</div>");a+="</div>";b("#toast-wrapper").append(a);b("#toast-wrapper .toast:last").toast("show")}})(jQuery);
const TYPES = ['info', 'warning', 'success', 'error'],
TITLES = {
'info': 'Notice!',
'success': 'Awesome!',
'warning': 'Watch Out!',
'error': 'Doh!'
},
CONTENT = {
'info': 'Hello, world! This is a toast message.',
'success': 'The action has been completed.',
'warning': 'It\'s all about to go wrong',
'error': 'It all went wrong.'
};
function show_random_toast()
{
let type = TYPES[Math.floor(Math.random() * TYPES.length)],
title = TITLES[type],
content = CONTENT[type];
$.toast({
title: title,
subtitle: '11 mins ago',
content: content,
type: type,
delay: 5000
});
}
function show_random_snack()
{
let type = TYPES[Math.floor(Math.random() * TYPES.length)],
content = CONTENT[type].replace('toast', 'snack');
$.toast({
title: content,
type: type,
delay: 5000
});
}#toast-container {
position: sticky;
z-index: 1055;
top: 0
}
#toast-wrapper {
position: absolute;
top: 0;
right: 0;
margin: 5px
}
#toast-container > #toast-wrapper > .toast {
min-width: 150px
}
#toast-container > #toast-wrapper > .toast >.toast-header strong {
padding-right: 20px
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<button class="btn-block btn-primary" onclick="show_random_toast();">Show Random Toast</button>
<br>
<button class="btn-block btn-primary" onclick="show_random_snack();">Show Random Snack</button>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>Bootstrap 4.2 now includes Toast notifications
Here's an example:
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="mr-auto">Title</strong>
<small>5 mins ago</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">
Content... this is a toast message.
</div>
</div>
Demo
More Bootstrap Toast layout/position examples:
Stacked vertically: https://codeply.com/go/3ZvZa9b8Im
Side-by-side: https://codeply.com/go/GFMde2ritI
3x3 grid: https://codeply.com/go/lj8GTFjvuK
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
