sneakyV sneakyV - 5 months ago 125
CSS Question

Lock bootstrap modal to bottom-right corner?

I'd like to lock a Bootstrap 3 modal to the bottom-right corner of the window, like this:

enter image description here

I have tried to move it using

top: x%; left: x%
CSS, but that completely breaks responsiveness. How do I lock it to the bottom right of the window, regardless of window size?

Thank you in advance.

JSFiddle: http://jsfiddle.net/eqhdqsyp/6

Answer

if you want to position it relative to the window, you want position:fixed; and if you want it to stay anchored right and bottom when the screen resizes left and top won't work, as you already noted so use right and bottom instead.

Bootstrap already styles this div like this:

@media (min-width: 768px)
.modal-dialog {
    width: 600px;
    margin: 30px auto;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}

so you'll need to override that with this:

.modal.in .modal-dialog {
    position:fixed;
    bottom:0px;
    right:0px;
    margin:0px;
}

http://codepen.io/ryantdecker/pen/ZOpQOX