Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.
Daemonite is using default Bootstrap’s toast HTML markup without extra CSS.
Here are just a few demos to show how to use it best.
Live demo
You can add a new label
You will find many examples below to use it perfectly.
Snackbar container and position
Wrap every toast in a <div class="toast-container">
to have the default centered bottom alignment.
Control the duration of the snackbar with data-delay="4000"
(in ms). Google states that Snackbars should be displayed from 4 to 10 seconds.
Display bottom-left
Add .justify-content-start
utility class to the .toast-container
to align snackbar bottom left.
Snackbar variations
Single line message with or without action
For a single line message (with or without a button), you can wrap your text and your button within a .toast-header
or .toast-body
div.
If you set an Action button, just add .btn
class to it for perfect color and positioning.
Two line message with action
You can still wrap text and button in a .toast-header
or .toast-body
.
The text should be wrapped in a <span class="mr-2">Text</span>
. Use a <br>
to break the text.
Two line message with longer Action button
Place your text in the .toast-header
. You can break your text with a <br>
or add CSS class .w-75
to the .toast-header
.
Set your button in the .toast-body
.