/ Drupal Developer
So we wanted to implement the great Bootstrap Toasts feature in our social productivity Drupal distro OpenLucius. HTML framework Bootstrap provides Toasts out of the box. After some trial and error, the end result seems fairly easy to use for everybody. So here is how:
- Override status-messages.html.twig in your (custom) theme with the code underneath;
1. Override status-messages.html.twig in your (custom) theme
So place the Twig template override file with this code in your theme. For example in YOURTHEME/templates/misc/status-messages.html.twig. Clear your cache and Drupal should take this file for generating messages, instead of the core one with the same filename. More on Twig template naming conventions here.
3. Et Voilá
The messages will also stack nicely in case of multiple messages, with multiple types (status, warning, error). Ánd have a nicely coloured header depending on message type (green, orange, red).
Additional info from the Bootstrap documentation
Things to know when using the toast plugin:
- Toasts are opt-in for performance reasons, so you must initialize them yourself.
- Please note that you are responsible for positioning toasts.
- Toasts will automatically hide if you do not specify autohide: false.
On the Toasts documentation page, you'll find the configuration options, for placements, autohide, etc.
For all you 80ies babies, here is the other Toasty! He scared the crap out of me when here appeared out of nowhere somewhere in the 90ies, especially with the high singing lady that accompanied him :)
So there you have it for great toast instead of boring Drupal messages, no offence :) Want to see it in live action? Try OpenLucius and see for yourself! Or you can download and install it yourself via our drupal.org project page. More info on Toasts here on getbootstrap.com.