Change Bootstrap Modal Dialog Effect With Animate.css

Changing a bootstrap modal dialog effect is very easy to do with animate.css. If you are bored with the standard bootstrap effect, animate.css is the best and lightweight solution to be applied with your web application.

Animate.css is an animated CSS owned by Daniel Eden that can be combined with bootstrap framework without reducing performance.

So that animation can work well you need to add the following CSS code:

Change Bootstrap Modal Dialog Effect With Animate.css
Bootstrap Modal Window With Animation Example

To change the standard animation from bootstrap modal form, it is necessary to add a javascript modal event. As an example, I will add animation flipInX when modal dialog called and will add animation flipOutY when the modal dialog is closed.

Jquery script above will change the value of class attributes in the .modal and .modal-dialog class. Whereas bootstrap dialog event executed is and

Bootstrap Modals Dialog Event

Bootstrap modal dialog has a few events that can be executed when a modal dialog invoked or closed. For more details, please visit

The tutorial is completed, it is very easy to change the animation or effects on the bootstrap modal dialog.

Thus my article about Change Bootstrap Modal Dialog Effect With Animate.css, hopefully useful 🙂

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.


 Add your comment
  1. Hi there, here a little sugestion about the code, this is because with the .attr() you are setting the class and removing previous attributes for class, this is my suggestion:

    $(‘.modal’).on(‘’, function (e) {
    $(‘.modal .modal-dialog’).addClass(‘flipInX animated’);
    setTimeout(function () {
    $(‘.modal .modal-dialog’).removeClass(‘flipInX animated’);
    $(‘.modal’).on(‘’, function (e) {
    $(‘.modal .modal-dialog’).addClass(‘flipOutX animated’);
    setTimeout(function () {
    $(‘.modal .modal-dialog’).removeClass(‘flipOutX animated’);

    Now the previous classes aren’t touched anymore whit the .addClass() and .removeClass() JQuery functions.

  2. This was really useful for me – many thanks.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.