how to change the default positioning of modal in bootstrap?

Question

<div class="modal">   <div class="modal-dialog">     <div class="modal-content">        <div class="modal-header">         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>         <h4 class="modal-title">Modal title</h4>       </div>        <div class="modal-body">         <p>One fine body…</p>       </div>        <div class="modal-footer">         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>         <button type="button" class="btn btn-primary">Save changes</button>       </div>      </div>   </div> </div> 

how can I change the default modal position in bootstrap, where should I edit to change the default position.

Answer 1

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; }