Bootstrap Toast with AOS

Published on 07/21/2021
Help Article Plugins Bootstrap
Erica Manning
Leiout Developer

This article will show you how to use the Animate on scroll library with a Bootstrap toast plugin! There's a lot to it so let's get started! 

Installing AOS Library

To install the AOS library on Leiout, you need to add the 'aos.css' and 'aos.js' files to uploads. These files can be found on the Trolley Web How To's folder or at this link to download. Once you download and upload the files, you need to add the AOS initialize function to the initialize js file. It should look something like this: 


Working with Bootstrap Toast

Bootstrap's Toast is very similar to a Bootstrap card. The HTML in the plugin template/slide will be set up like this: 


The wrapper will look like this: 

You may style it with CSS how you please! Finally, you need to implement the AOS library in your toast. To do that, add the following to the toast class in your template/slide: 


Now you need to add some JavaScript to your plugin!


Lines 1-4 of the following JS code go with the Bootstrap toast feature and allow it to show and hide with the close button. Lines 7-8 give the data-aos-anchor attribute a value of the parent ID in which the element is located. You can also skip this and give another element on the page a class or ID and set the data-aos-anchor to that value in your HTML like this: 



The data-aos-anchor tells the element to appear when the ID or class is visible on the page. There are different attributes and values you can add to the attributes in the example. Check out all of the attributes and their values at this link


Lottie Animations

26, Feb 2023
Help Article
Navik Mega Menu

This article explains how to create and use the mega menu functionality in Leiout navigation menus.

20, Sep 2021
Help Article Design
Google Translate

This article explains how to install and use Google's translate javascript library and implement a b...

20, Sep 2021
Help Article
Mix Blend Mode

This help article explains the CSS mix-blend-mode property and how to incorporate it with hero image...

06, Aug 2021
Help Article Design