Using Drupal and Bootstrap HTML? An easy snippet for great Toasts instead of boring Drupal messages :)

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:

1. Override status-messages.html.twig in your (custom) theme with the code underneath;
2. Initiate Toasts in Javascript.

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.

2. Initiate Toasts in Javascript

In your (custom) Javascript make sure to initiate the Toasts

$('.toast').toast('show');

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:

If you’re building our JavaScript from source, it requires util.js.

• 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.

Bonus

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 :)

Wrap up

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.