Is it possible to make a trendy Twitter bootstrap slide from the side or from the bottom instead of crawling down?

Question

Currently, the modal slide effect is performed by adding the fade class to the modal div. Is it possible to change the effect on sliding from the side (or bottom) by changing the css? I could not find any information on the Internet on how to do this, and I don't know if css is enough to do it myself.

HTML:

 <div id='test-modal' class='modal fade hide'> <div>Stuff</div> </div> 

Answer 1

Bootstrap 3 now uses CSS transform translate3d instead of CSS transitions for better animations using GPU hardware acceleration.

It uses the following CSS (no easing)

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

Here is the CSS you can use to navigate from the LEFT side

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

Note the negative selector. I noticed that this is necessary in order to interfere with the definition of .modal.in. Modal-dialog. Note. I am not a CSS guru, so if anyone can better explain this, feel free to :)

How to move from different directions:

• 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 directions of the slides, you can assign the class as "left" for the modal ...

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

... and then focus on 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 can go in a bit and jump 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 script to display alternative angles

---

If you want to use this in the LESS template, you can use the mixin BS3 prefix (as long as it is enabled)

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

Answer 2

This information is outdated. Bootstrap 3 now handles this differently. Please see the updated answer if you are using a newer version .

The slide transition is actually handled by the css bootstrap. In particular, it is processed 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 direction of the transition, simply add (to your own stylesheet, because bootstrap css will be updated in future versions) these styles. They will rewrite bootstrap styles. To modal slide to 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%; }​ 

Jsfiddle work here .

To move from right to left, put a large positive percentage for the modal transition from and change the place of the final modal rest in the appropriate direction. e.g. .modal.fade { left: 200%; } ... .modal.fade.in { left: 50% }; .modal.fade { left: 200%; } ... .modal.fade.in { left: 50% };

Example from right to left.

Below for example.

Additional information on CSS Transitions is here .

Answer 3

This is for anyone looking for a 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; } } }