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

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);
}