How Can I Put Bootstrap Modal in Horizontally center?

Question

I have a modal that I resize it.I want large width size of modal and horizontally centered. In addition when I resize it to smaller it's correct.

<style>
    #PopupModel   {width:60%;}

.modal {
}
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
}
.vertical-align-center {
    /*/To center vertically*/ 
    display: table-cell;
    vertical-align: middle;
}
.modal-content {
     /*Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it*/ 
    width:inherit;
    height:inherit;
     /*To center horizontally*/ 
   
}

</style>

<div class="modal fade" id="PopupModel" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" >
    <div class="modal-dialog" role="document" >
        <div class="modal-content" >    

            <div class="modal-header">

                <h4 class="modal-title" id="gridSystemModalLabel">Product Define</h4>


            </div>
            <div class="modal-body" id="modelResult">
                <br />
            </div>


        </div><!-- /.modal-content -->
        <div class="modal-footer">
            <div class="">
                <button type="submit" class="btn btn-primary" style="width: 100px; height: 38px;">save</button>
                <button type="button" class="btn" data-dismiss="modal" style="width: 70px;height: 38px; ">cancel</button>
            </div>
        </div>
    </div><!-- /.modal-dialog -->
</div>

I test some ways but not worked for me .any help ?

score 9 · Accepted Answer · edited May 23 '17 at 12:26

9

your current code in jsfiddle would help out a lot but can you try: .modal { width: 600px; //size of modal margin: 0 auto; }

option 2:

if you've no issues using flexbox, refer to the answer on this one Flexbox: center horizontally and vertically

edited May 23 '17 at 12:26

Community

1
1

answered Jun 21 '16 at 16:48

Justin Go

331
1
5

4

This is a good idea, but you are hard-coding the width. This will require the user to scroll left and right on mobile devices – Richard Hamilton Jun 21 '16 at 16:55

score 4 · Answer 2 · answered Feb 02 '17 at 20:18

This may be a tad late, but the simplest way of aligning the modal in the center of your screen is to use the vertical-align: middle; property inherent to inline elements.

Please remove all extra formatting you have added to the basic Bootstrap modal and add the following CSS:

.modal {
    text-align: center;
}

.modal::before {
    content: "";      
    display: inline-block;
    height: 100%;    
    margin-right: -4px;
    vertical-align: middle;
}

.modal-dialog { 
    display: inline-block;  
    text-align: left;   
    vertical-align: middle;
}

Please keep in mind that I am using Bootstrap 3 and the above CSS may or may not work with a Bootstrap 4 modal.

Original solution: http://www.learnsourcecode.com/blogs/align-bootstrap-modal-center-of-screen-vertically

Thanks for the information, however, the user was asking for horizontal centering... — Rick Paul, Mar 08 '18 at 09:27
@RickPaul, yes, but in their code they indicated that they wanted it vertically aligned as well. They're using a table layout with vertical-align: middle. — ariebear, Apr 05 '18 at 19:14

score 2 · Answer 3 · answered Jan 07 '20 at 19:42

I had this issue with .modal-lg and .modal-xl in Bootstrap 4.2.1. I simply added:

.modal.modal-lg, .modal.modal-xl { max-width: unset !important; right: 0; }

For some reason this worked perfectly, though buyer beware, I haven't had a chance yet to test this extensively. If anyone sees or has a problem with this, I'd like to know.

score 1 · Answer 4 · answered Jan 24 '21 at 14:51

1

I got exactly the same problem and just found the solution! This is how I solved it.

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 600px;
    }
}

Hope it's helpful!

answered Jan 24 '21 at 14:51

Allie X

11
1

score -1 · Answer 5 · answered Jun 21 '16 at 16:53

Simply use text-align: center

.modal-header, .modal-footer {
  text-align: center;
}

<style>
    #PopupModel   {width:60%;}

.modal {
}

.modal-header, .modal-footer {
  text-align: center;
}
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
}
.vertical-align-center {
    /*/To center vertically*/ 
    display: table-cell;
    vertical-align: middle;
}
.modal-content {
     /*Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it*/ 
    width:inherit;
    height:inherit;
     /*To center horizontally*/ 
   
}

</style>

<div class="modal fade" id="PopupModel" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" >
    <div class="modal-dialog" role="document" >
        <div class="modal-content" >    

            <div class="modal-header">

                <h4 class="modal-title" id="gridSystemModalLabel">Product Define</h4>


            </div>
            <div class="modal-body" id="modelResult">
                <br />
            </div>


        </div><!-- /.modal-content -->
        <div class="modal-footer">
            <div class="">
                <button type="submit" class="btn btn-primary" style="width: 100px; height: 38px;">save</button>
                <button type="button" class="btn" data-dismiss="modal" style="width: 70px;height: 38px; ">cancel</button>
            </div>
        </div>
    </div><!-- /.modal-dialog -->
</div>

no worked for me,when working that the size is not larged. – Mohsen Zahedi Jun 21 '16 at 17:01 — Mohsen Zahedi, Jun 21 '16 at 17:01

score -3 · Answer 6 · answered Jun 12 '19 at 07:00

-3

This works for me.

Adjust top and left values to make model at center as per your needs.

.modal {
    position: fixed;
    top: 15%;
    left: -20%;
}

References: https://gist.github.com/emerico/9127830fe2496c44c116fe600f9097bf

answered Jun 12 '19 at 07:00

Pankaj Shinde

3,361
2
35
44

How Can I Put Bootstrap Modal in Horizontally center?

6 Answers6