How to Make a Twitter Bootstrap Modal Slide from the Side or Bottom Instead of Sliding Down

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

Twitter Bootstrap modal: How to remove Slide down effect

Just take out the fade class from the modal div.

Specifically, change:

<div class="modal fade hide">

to:

<div class="modal hide">

UPDATE: For bootstrap3, the hide class is not needed.

How do you modify the modal height without removing the slide effect in Bootstrap Twitter?

if you add .fade.in with your class then fade in effect will remain there.

#test-modal.modal.fade.in {
    top:35%;
}

you can test it here.

Bootstrap Modal sitting behind backdrop

Just move the entire modal outside of the rest of your code, to the very bottom. It doesn't need to be nested in any other element, other than the body.

<body>
    <!-- All other HTML -->
    <div>
        ...
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal">
        ...
    </div>
</body>

Demo

They hint at this solution in the documentation.

Modal Markup Placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components
affecting the modal's appearance and/or functionality.