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 t

Answer 1

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

HTML

Slide Right Panel


  

    

      

        
 Your Modal Title
        
          ×
        
      
      

        
Your Content
      
    
  

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