How to do it…

  1. Include animate.css inside the head tag in app/_layout.ejs:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
  1. In app/recipe06-10.ejs, add the following code in between the HTML body tags:
<!--Call your modal--><a id="demo01" href="#animatedModal">DEMO01</a><!--DEMO01--><div id="animatedModal"> <!--THIS IS IMPORTANT! to close the modal, the class name has to   match the name given on the ID class="close-animatedModal" --> <div class="close-animatedModal">  CLOSE MODAL </div>  <div class="modal-content"> <!--Your modal content goes here--> </div></div>
  1. Add the address of the raw animatedModal.js file from the plugin's GitHub repository into the GitCDN.xyz input field. Copy ...

Get Bootstrap 4 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial