Both vertically and horizontally center of Bootsrap ui Modal

Question

I'm trying to make a Bootstrap ui Modal that is both vertically and horizontally center align .

I tried this solution , that indeed vertically centered the modal , but when I tried it with my own template (with 800px) it lost its horizontally center:

i.e - http://plnkr.co/edit/vp3IWIcrpGG6ehH8JKVe?p=preview

How could I achieve this modal with vertically and horizontally center with my own template ?

Note - The width and height of the template is dynamic so the solution should be appropriate for any width and and height .

Hi, But your `template` is not resizing on window resize. it's just remain 800px and 500px in all screens. — Ganesh Yadav, Jun 07 '17 at 09:50

score 0 · Accepted Answer · answered Jun 07 '17 at 09:23

the reason the modal lost its center is due to this css rule:

@media (min-width: 768px) {
    .modal-dialog {
      width: 600px;
      margin: 30px auto;
    }
}

since your template has a 800px width, it overflows its container (the .modal-dialog div)

if you set .modal-dialog to width: auto it'll be fixed.

example: http://plnkr.co/edit/cYoYOgN1iMUzPKJuBw9H?p=preview

score 0 · Answer 2 · answered Jun 07 '17 at 09:58

I did just override .modal-dialog with

.modal .modal-dialog {
 max-width: 800px;
 width: 100%;
}

this. Because it has fixed with:600px; which should be max-width:800px;

For smaller screens, I added margin auto so it doesn't go down.

@media (max-width: 767px){
  .modal .modal-dialog{
    margin:10px auto;
  }
}

Plunker demo

Both vertically and horizontally center of Bootsrap ui Modal

2 Answers2