Read the original Bootstrap documentation on toasts here.
The toast block allows you to add a push notification style element to your page that can be toggled at the click of a button or by adding custom JS. When adding the toast block you gain access to additional blocks: Toast Body and Toast Header. Both of these blocks have limited options available – they both provide the flexibility to add whatever content you like into them and only have the advanced settings which are the same as the parent toast block .Toggle Toast
In order to get the toast block to function there are a few steps you need to take:
An example of this would be to add the HTML anchor attribute to the toast block of my-toastyou would then need to add a link or button that links to #my-toast. The rest will be taken care of for you.
The toast block has the following options:
The placement option allows you to position where on the page the toast should appear. There are four options available:
.end-0 class to display the toast at the top right of the page
.start-0 class to display the toast at the top left of the page
.end-0 class to display the toast at the bottom right of the page
.start-0 class to display the toast at the bottom left of the page
The background option lets you change the background colour of the toast using the predefined theme colours. There are eight options available:
The text color option lets you change the text colour of the toast using the predefined theme colours. There are eight options available:
The border colour option lets you change the border colour of the toast using the predefined theme colours. There are eight options available:
Blocks tend to have a large number of settings along with different settings for each device size. You may get to the point where you have changed lots of settings and want to revert them back to the default. This can be time consuming and difficult to remember which settings have been changed to we have supplied three buttons that make this a piece of cake. Simply click the relevant button to reset your settings.
The HTML anchor option allows you to set an ID on the current block. This is useful when you wish to link to a specific area on a page.
The additional class(es) option lets you add any other classes to the block. This is really useful as it allows you to utilise all of the Bootstrap utility classes to quickly apply styles and add more advanced customisations. A few examples of this would be to align all inner content by adding the
text-end classes. You also have the ability to quickly search all of the available Bootstrap classes. To search Bootstrap classes open the Add Bootstrap class select box. You can filter the results by typing in the available search field. When you select an option it will automatically be added to your class list.