Bootstrap modal at center of the screen

Question

I've been trying to show a modal on my website using Bootstrap 3. the code below is copied from the bootstrap site and works.

When the modal shows it shows up at the top of the screen - is it possible to display it right at the center?

<div id="modal" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </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>

Thanks

Does [this thread][1] answer your question? [1]: http://stackoverflow.com/questions/18422223/bootstrap-3-modal-vertical-position-center — Grmpfhmbl, Feb 11 '14 at 06:32

Nikhil Nanjappa · Answer 1 · 2014-02-11T14:33:27.413

#modal {
   margin: 0 auto; 
}

One of the best way to render a modal is to create a separate partial file containing the whole modal code(as shown in the question) inside it, and then data-toggle to that div's id as usual.

By default your modal should appear in the center of the page layout. But if it doesn't then my above given code should do the trick.

If still it doesn't that means your div classes are getting overridden somewhere. DO Inspect element(Right-click + Inspect Element) on your modal and check which CSS classes are conflicting your modal's position.

To Load a page from external file as you asked:

1) First create an external file/partial containing all the modal code and save it as _terms_and_conditions.html.erb (Note: the ID is important)

<div class="modal fade" id="e-terms" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </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>

2) Now Call that external file you just created on click of a link, like this

<a data-target="#e-terms" data-toggle="modal" type="button">Terms and conditions</a>

We are just pasting that piece of modal code to a different file and calling that whole file itself.Thats it ! The way of creating a file may be dependent on the language you using(Since you have not mentioned it anywhere). But the important point is to target the ID of the modal code whether its written in the same file or a different file.

Hi, tried adding the margin you suggested - doesn't work. How do you load the entire html from an external file? can you provide an example? thank — developer82, Feb 11 '14 at 08:56
Sure, I have given an example on top but for your problem try Inspect Element on your modal and check if any other classes are conflicting. Its the simplest way to find out what the problem is. — Nikhil Nanjappa, Feb 11 '14 at 14:44

score 0 · Answer 2 · answered Feb 11 '14 at 06:39

0

Yes, just add this class to your css:

.modal-dialog {
   margin-right: 0;
   margin-top: your desired value ;
}

hope this will help you

answered Feb 11 '14 at 06:39

AhmedBinNasser

2,735
1
24
24

score 0 · Answer 3 · answered Feb 11 '14 at 07:01

0

Ideally it should but if have any problem you can use this I am guessing the content of the modal would be dynamic so can write this.

var h = ($('.modal').height())/2;
$('.modal').css({'top':'50%','margin-top':'-'+h+'px'});

answered Feb 11 '14 at 07:01

Alex

457
3
16

Bootstrap modal at center of the screen

3 Answers3