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.

http://stackoverflow.com/questions/18053408/vertically-centering-bootstrap-modal-window... might be helpful for you. — Kheema Pandey, Jul 14 '14 at 07:14

score 54 · Accepted Answer · answered Jul 14 '14 at 07:20

54

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

answered Jul 14 '14 at 07:20

msnfreaky

1,013
10
14

how can er make the background of modal transparent instead of the black one . – dpndra Jul 14 '14 at 07:45
opacity: 1; or addclass 'fade' – msnfreaky Jul 14 '14 at 08:06
isn't there any way to remove the black transparent color and make the modal to pop up without any effect?what if i want just the modal to appear without any effect? – dpndra Jul 14 '14 at 08:15
override the 'modal-backdrop' css, change the opacity : 0; – msnfreaky Jul 15 '14 at 05:31

score 19 · Answer 2 · edited Nov 06 '17 at 10:52

19

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...)

edited Nov 06 '17 at 10:52

Sonicd300

1,950
1
16
22

answered Aug 13 '16 at 00:38

SanThee

2,301
3
23
35

This worked for me using boostrap 3.3.7, the accepted answer didn't. – NemyaNation Apr 20 '20 at 21:01
I tried this for some python/Dash development ... It is working like a charm ! – Cyryl1972 Jun 02 '22 at 14:23

carlin.scott · Answer 3 · 2020-10-21T00:42:39.713

7

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

"vh" means "% of view height"
"vw" means "% of view width"

edited Oct 21 '20 at 00:42

answered Oct 21 '20 at 00:34

carlin.scott

6,214
3
30
35

V31 · Answer 4 · 2014-07-14T07:42:40.300

To change the Modal position in the viewport you can target the Modal div id, in this example this id is myModal3

    <div id="modal3" 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>


#myModal3 {
top:5%;
right:50%;
outline: none;
overflow:hidden;
}

have overflow:hidden in the css. Updated the css class #myModal3 — V31, Jul 14 '14 at 07:43

score 1 · Answer 5 · answered Feb 08 '22 at 10:33

1

For Bootstrap 5, just add this to your css.

  .modal-dialog { top: 7rem !important; }

Do not add to .modal otherwise the modal will not be dismissed when tapping on the top of the modal because backdrop is shifted down too.

answered Feb 08 '22 at 10:33

Ken Ratanachai S.

3,307
34
43

score 1 · Answer 6 · edited Jul 14 '22 at 07:54

1

In the CSS file add following lines:

.modal-dialog {
  transform: translateY(50%)!important;
}

You can change 50% to any other value, which will solve the problem in your browser.

edited Jul 14 '22 at 07:54

Monsieur Pierre Doune

687
8
29

answered Jul 13 '22 at 10:36

Joshi Sourabha

11
2

MShaba007 · Answer 7 · 2023-06-19T16:45:04.227

0

In Bootstrap 5 there is two options to open modal in center. No need to add any custom CSS.

Vertically centered modal

<div class="modal-dialog modal-dialog-centered">
  ...
</div>

Vertically centered scrollable modal

<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>

I hope this will help too.

edited Jun 19 '23 at 16:45

answered Jun 19 '23 at 16:38

MShaba007

56
4

score -6 · Answer 8 · answered May 10 '18 at 23:07

-6

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

answered May 10 '18 at 23:07

Rainman

1

1

If you can't solve the issue, add ```display: none``` to it. Bravo! – Vibhor Dube May 23 '21 at 10:47

how to change the default positioning of modal in bootstrap?

8 Answers8

Linked