Возможно ли сделать модальное окно Twitter Bootstrap, которое выдвигается сбоку или снизу, вместо появления сверху?

Bootstrap 3 теперь использует CSS-трансформацию translate3d вместо CSS-анимаций для улучшения анимации с использованием аппаратного ускорения GPU.

Вот CSS, который используется для эффекта затухания:

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

Если вы хотите, чтобы модальное окно появлялось слева, вы можете использовать следующий код:

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

Обратите внимание на селектор :not(.in). Это необходимо, чтобы избежать конфликта с определением .modal.in .modal-dialog. Примечание: Я не эксперт в CSS, поэтому, если кто-то может объяснить это лучше, не стесняйтесь делать это 😃

Вот как можно сделать появление модального окна с разных сторон:

• сверху: translate3d(0, -25%, 0)
• снизу: translate3d(0, 25%, 0)
• слева: translate3d(-25%, 0, 0)
• справа: translate3d(25%, 0, 0)

Если вы хотите комбинировать разные направления появления, можете присвоить классу модального окна, например, 'left':

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

...и затем нацелиться на этот класс с помощью CSS:

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

Пример: http://jsfiddle.net/daverogers/mu5mvba0/

БОНУС - Вы также можете сделать появление под углом:

• верхний левый: translate3d(-25%, -25%, 0)
• верхний правый: translate3d(25%, -25%, 0)
• нижний левый: translate3d(-25%, 25%, 0)
• нижний правый: translate3d(25%, 25%, 0)

ОБНОВЛЕНИЕ (28/05/15): Я обновил пример, чтобы показать альтернативные углы

Если вы хотите использовать это в шаблоне LESS, вы можете использовать миксин с вендорскими префиксами от BS3 (при условии, что он подключен):

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