Is it possible to make a Twitter Bootstrap modal slide from the side or bottom instead of sliding down?

Question

Currently the modal slide down effect is done by adding the fade class to the modal div. Is it possible to change the effect to sliding from the side (or from t

Answer 1

This information is outdated. Bootstrap 3 handles this differently now. Please see the updated answer if you are using the newer version.

The "slide-in" transition is in fact handled by the bootstrap css. In particular, it is handled by this part:

// bootstrap.css

.modal.fade {
  top: -25%;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
       -o-transition: opacity 0.3s linear, top 0.3s ease-out;
          transition: opacity 0.3s linear, top 0.3s ease-out;
}

.modal.fade.in {
  top: 50%;
}

To change the transition direction, just add (in your own stylesheet, because the bootstrap css will be updated in future versions) these styles. These will overwrite the bootstrap styles. To have the modal slide in from the left, try:

.modal.fade {
  left: -25%;
  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
       -o-transition: opacity 0.3s linear, left 0.3s ease-out;
          transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.fade.in {
  left: 50%;
}​

Working jsfiddle here.

To transition from the right to left, supply a large positive percentage for the modal to transition from, and change the modal's final resting place to the respective direction. e.g. .modal.fade { left: 200%; } ... .modal.fade.in { left: 50% };

Right to left example.

Bottom to top example.

More info on CSS Transitions here.