CODEWITHSUNDEEP
csstransformbootstrap-4twitter-bootstrap-4
user1645914
user1645914

Reputation: 383

CSS for Bootstrap 4 modal to slide in from bottom

This is how it was done in Bootstrap 3:

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

Or something like this would have worked as well:

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

The magic obviously happened in the modal classes with the transform property. But this does not work in Bootstrap 4. I am specifically using Bootstrap v4.0.0-alpha.5. What changes do I need to make to achieve the same effect?

Demo url - https://jsfiddle.net/qww47vfn/

Upvotes: 1

Views: 2308

Answers (1)

roberrrt-s
roberrrt-s

Reputation: 8210

Found it, apply the following CSS:

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

I've inverted the transform origin, instead of -25%, it's now 25% (effectively making it fade in from below). Adjust the amount to adjust the initial fade in position.

What changed?

Instead of translate3d the property translate is now being used, so changing the original values won't matter since the model listens to the new properties now.

Side note:

This doesn't work when you implement it as a new rule for some reason, I don't have a local version of bootstrap, but changing it inside the DevTools solved it for me. I suppose you need to overwrite the initial code to change it.

Upvotes: 3

Related Questions