CSS / JavaScript: Twitter Bootstrap center modal vertically on mobile web view

I’ve been working with modal boxes using Twitter Bootstrap. And the page I’m working on needs to be viewed in mobile devices. The modal looks nice and centered when viewed on desktop, but when run in mobile web browsers, it’s aligned to the top.

Someone on StackOverflow suggested the use of a helper div plus some custom CSS to align Bootstrap modals vertically.

Code for modal:

CSS:

Source: Vertically centering Bootstrap modal window

Catzie

A Filipino who is a mobile & web developer on weekdays, and a baker on weekends. When I have time to spare, I blog, play video games, watch series (usually anime), cook dishes, draw, or spend a little time with pets. When I have the rare luxury of time, I get to travel and record song covers too! Follow on Twitter: @catzie

Leave a Reply

Your email address will not be published. Required fields are marked *