CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mohsen Zahedi
Mohsen Zahedi

Reputation: 688

How Can I Put Bootstrap Modal in Horizontally center?

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 ?

Upvotes: 8

Views: 40888

Answers (6)

Allie X
Allie X

Reputation: 11

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!

Upvotes: 1

Dan S
Dan S

Reputation: 109

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.

Upvotes: 2

Pankaj Shinde
Pankaj Shinde

Reputation: 3689

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

Upvotes: -3

ariebear
ariebear

Reputation: 155

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

Upvotes: 4

Justin Go
Justin Go

Reputation: 331

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

Upvotes: 9

Richard Hamilton
Richard Hamilton

Reputation: 26444

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>

Upvotes: -1

Related Questions