css - 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 the bottom) by changing the css? I couldn't find any information online on how to do this and don't know enough css to do this myself.

html:

<div id='test-modal' class='modal fade hide'>
  <div>Stuff</div>
</div>

Answer 1

Bootstrap 3 now uses CSS transform translate3d instead of CSS transitions for better animations using GPU hardware acceleration.

It uses the following CSS (sans easing)

.modal.fade .modal-dialog {
    -webkit-transform: translate3d(0, -25%, 0);
    transform: translate3d(0, -25%, 0);
}

Here is CSS you can use to slide in from the LEFT side

.modal.fade:not(.in) .modal-dialog {
    -webkit-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
}

Notice the negative selector. I noticed this was necessary to keep the ".modal.in .modal-dialog" definition from interfering. Note: I am not a CSS guru, so if anyone can better explain this, feel free :)

How to slide in from different sides:

• top: translate3d(0, -25%, 0)
• bottom: translate3d(0, 25%, 0)
• left: translate3d(-25%, 0, 0)
• right: translate3d(25%, 0, 0)

---

If you want to mix and match different slide directions, you can assign a class like 'left' to the modal...

<div class="modal fade left">
    ...
</div>

...and then target that specifically with CSS:

.modal.fade:not(.in).left .modal-dialog {
    -webkit-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
}

Fiddle: http://jsfiddle.net/daverogers/mu5mvba0/

BONUS - You could get a little zany and slide in at an angle:

• top-left: translate3d(-25%, -25%, 0)
• top-right: translate3d(25%, -25%, 0)
• bottom-left: translate3d(-25%, 25%, 0)
• bottom-right: translate3d(25%, 25%, 0)

UPDATE (05/28/15): I updated the fiddle to display the alternative angles

---

If you want to use this in a LESS template, you can use BS3's vendor-prefix mixin (as long as it's included)

.modal.fade:not(.in) .modal-dialog {
    .translate3d(-25%, 0, 0);
}