Vertical alignment of boot modal on mobile phones

Question

This question seems to have been asked several times on github, but I have not come across any solutions: https://github.com/twitter/bootstrap/issues/1399

How modally can I align vertically on small screens?

Answer 1

Edit: since Bootstrap 2.0.2, this is no longer a problem. Basically, bootstrap now implements the solution below, which I will stop here for reference purposes.

As a rule, on small screens, modals will fill most of your window, so positioning relative to the button that caused the modality does not make much sense. Usually I just rewrite the modal position for phones:

@media (max-width: 767px) { .modal { top: 20px; // negative left margin to position horizontally. margin: 0 0 0 -280px; // already in modals.less, just copied for clarification: left: 50%; position: fixed; } } 

(This is in LESS, pure CSS solutions look the same).