Improve UX with Bootstrap 4.2 – UX Planet
The Bootstrap Alert component has never quite lived up to expectations. While the Alert does provide contextual feedback to the User, it doesn’t provide auto-hide, timing delay and animation as one might expect.
Horray! Bootstrap 4.2 finally introduces the Toast component which, IMO, is better suited to provide notification messages to the User. Here’s what it looks like and how it works…
<div class="toast" role="alert">
<button type="button" class="close" data-dismiss="toast">
toast-body are the recommended Toast structure, but neither is required. The Toast has a slightly translucent background color of
rgba(255,255,255,.85) since it’s designed to overlay other page content. The background color can be overridden using any of the background color Utility classes.
According to the Bootstrap docs, you’ll need to “Place toasts with custom CSS as you need them”. However, I found that the Utility classes work nicely in most cases. For example, place the Toast in a
position-absolute parent, and then use flexbox (
d-flex) with auto-margin (
ml-auto) to push the Toast to the right:
<div class="position-absolute w-100 d-flex flex-column p-4">
<div class="toast ml-auto show" role="alert">
Options: Animation, Delay and Auto-Hide
The Bootstrap Toast has a few simple options. The boolean animation option by default is true, and provides a basic fade transition. The delay option controls the delay in ms before the Toast hides, which defaults to 500ms.
The autohide option defaults to true. You must set
autohide:false to programmatically call the “hide” method on the Toast. When using
autohide:false, you should add a close button to allow Users to dismiss the Toast.
Initialize with jQuery:
Just like all the other Bootstrap 4 components, the options can be passed via jQuery, or as data-attributes on the Toast element in HTML.
Use Data Attributes:
<div class="toast" data-delay="1000" data-autohide="false"></div>
Additionally, Bootstrap 4 Toasts follow accessibility standards which you can read more about for use in screen readers and assistive technology.
Here’s the Bootstrap Toast example: https://www.codeply.com/view/6Y4bf3PKOF