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

Question

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

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.

This is for someone who is looking for Bootstrap 4 solution:

HTML

<a class="btn btn-primary" data-toggle="modal" data-target="#modalSidePaneRight">Slide Right Panel</a>

<div class="modal fade modal-right-pane" id="modalSidePaneRight" tabindex="-1" role="dialog" aria-labelledby="sidePaneRightModal" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content rounded-0">
      <div class="modal-header">
        <h5 class="modal-title" id="sidePaneRightModal"><i class="fi fi-calender"></i> Your Modal Title</h5>
        <button type="button" class="close" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body bg-primary">
        <h1>Your Content</h1>
      </div>
    </div>
  </div>
</div>

SCSS

/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add ".modal-left-pane" or ".modal-right-pane" in modal parent div, after class="modal".
*******************************/

// Modal Panel: Right
$header-nav-height: 56px;
$modal-height: calc(100vh - #{$header-nav-height});

.modal{
  &.modal-left-pane,
  &.modal-right-pane {
    .modal-dialog {
      max-width: 380px;
      min-height: $modal-height;
    }

    &.show .modal-dialog {
      transform: translate(0, 0);
    }

    .modal-content {
      min-height: $modal-height;
    }
  }
  &.modal-left-pane {
    .modal-dialog {
      transform: translate(-100%, 0);
      margin: $header-nav-height auto 0 0;
    }
  }

  &.modal-right-pane {
    .modal-dialog {
      transform: translate(100%, 0);
      margin: $header-nav-height 0 0 auto;
    }
  }
}