how to change the default positioning of modal in bootstrap

Question

lt div class  modal  gt     lt div class  modal-dialog  gt       lt div class  modal-content  gt          lt div class  modal-header  gt           lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt    lt  button gt           lt h4 class  modal-title  gt Modal title lt  h4 gt         lt  div gt          lt div class  modal-body  gt           lt p gt One fine body    lt  p gt         lt  div gt          lt div class  modal-footer  gt           lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt           lt button type  button  class  btn btn-primary  gt Save changes lt  button gt         lt  div gt        lt  div gt     lt  div gt   lt  div gt    how can I change the default modal position in bootstrap  where should I edit to change the default position

User · Accepted Answer

Add the following css to your html and try changing the top  right  bottom  left values    modal      position  absolute     top  10px     right  100px     bottom  0     left  0     z-index  10040     overflow  auto     overflow-y  auto

User · Answer

If you need to change the bottom position of the modal  you need to modify the max-height of the modal-body   modal-body     max-height  75vh     As other answers have said  you can adjust the right and top on the modal-dialog    modal-dialog     top  10vh    right  5vw       quot vh quot  means  quot   of view height quot   quot vw quot  means  quot   of view width quot

User · Answer

I know it s a bit late but I had issues with a modal window not allowing some links on the menu bar to work  even when it has not been triggered  But I solved it by doing the following    modal  display none

User · Answer

I get a better result setting this class    modal-dialog     position  absolute    top  50px    right  100px    bottom  0    left  0    z-index  10040    overflow  auto    overflow-y  auto      With bootstrap 3 3 7    all credits to msnfreaky for the idea

User · Answer

To change the Modal position in the viewport you can target the Modal div id  in this example this id is myModal3       lt div id  modal3  class  modal  gt     lt div class  modal-dialog  gt       lt div class  modal-content  gt         lt div class  modal-header  gt           lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt    lt  button gt           lt h4 class  modal-title  gt Modal title lt  h4 gt         lt  div gt         lt div class  modal-body  gt           lt p gt One fine body    lt  p gt         lt  div gt         lt div class  modal-footer  gt           lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt           lt button type  button  class  btn btn-primary  gt Save changes lt  button gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt     myModal3   top 5   right 50   outline  none  overflow hidden

[javascript] how to change the default positioning of modal in bootstrap?

Examples related to javascript

Examples related to css

Examples related to twitter-bootstrap