Sometimes, we want to remove slide down effect with Twitter Bootstrap modal with CSS.

In this article, we’ll look at how to remove slide down effect with Twitter Bootstrap modal with CSS.

How to remove slide down effect with Twitter Bootstrap modal with CSS?

To remove slide down effect with Twitter Bootstrap modal with CSS, we can set the transition and transform styles to none.

For instance, we write

.modal.fade .modal-dialog {
  -moz-transition: none !important;
  -o-transition: none !important;
  -webkit-transition: none !important;
  transition: none !important;

  -moz-transform: none !important;
  -ms-transform: none !important;
  -o-transform: none !important;
  -webkit-transform: none !important;
  transform: none !important;
}

to select the elements with the modal-dialog class in the elements with the modal-fade class and set their transition and transform styles to none for each kind of browser.

We use !important to override the existing styles.

Conclusion

To remove slide down effect with Twitter Bootstrap modal with CSS, we can set the transition and transform styles to none.