2

I added Bootstrap modals to my website, but I've noticed that the space between the modal and the top of the screen is greater than the space between the modal and the bottom of the screen.

I've added style="margin-top:0;padding-top:0" to each of the div tags but it had no effect.

The intention is to decrease the gap between the modal and the top of the screen.

j08691
  • 204,283
  • 31
  • 260
  • 272
E.D.A
  • 137
  • 1
  • 2
  • 14
  • 2
    It would be great if you could provide an online example. – Hashem Qolami Apr 03 '15 at 19:43
  • Unfortunately I do not have anywhere to upload the whole thing to, but here is a screenshot of the modal on the screen: http://i.imgur.com/mVOw8bh.png – E.D.A Apr 03 '15 at 19:46
  • If you could provide [a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). – Hashem Qolami Apr 03 '15 at 19:49
  • 2
    That is due to a variety of reasons. First off, the default modals use fixed positioning, so you'd have to use the `top` and `bottom` css properties to adjust to your liking. Secondly, BS3+ modals are set to overflow the screen so if the content is longer than the window height, you can scroll. If you want a perfectly centered modal, everytime, you'll have to make sure that another container (ie div) is set to scroll like in BS2 and their `.modal-body`. – dlane Apr 03 '15 at 20:33

2 Answers2

7

I just did it using the following CSS:

.modal-dialog {
    margin: 20vh auto 0px auto
}

Using vh units makes it a bit more "responsive".

Also, you may be interested in this post.

Community
  • 1
  • 1
Tomas Gonzalez
  • 1,124
  • 15
  • 33
3

Using the top and bottom in my CSS worked just great. I modified the modal class and added top:10px.

E.D.A
  • 137
  • 1
  • 2
  • 14