How to center react bootstrap modal?

Question

I am using the react boostrap modal and trying to position it evenly centered and currently i am specifying the width of the modal and then setting the margin-left on the modal-dialog class to 285px !important which seems to work. But how do i make it so when the screen size goes below xl size, the margin should be 100px.

Here is the link to the codepen.

My CSS looks like this:-

 .modal-content {
   width: 1200px  
   }
 .modal-dialog {
   margin-left: 285px !important  
   }
  @media screen and (max-width: 1000px) {
 .modal-dialog {
    margin-left: 100px !important
  }
}

Apparently, the media query doesn't seem to work. Or is there a way to set the modal to always be centered regardless of the screen size?

Answer 1

You can just add the property center in Modal. For example:

<Modal
  size="lg"
  aria-labelledby="contained-modal-title-vcenter"
  centered
>
......
</Modal>

Also, you can read the documentation https://react-bootstrap.github.io/components/modal/#modal-vertically-centered

I hope my answer will help you.

Answer 2

If you use flex it is a piece of cake:

div.fade.in.modal {
  display:flex !important;
}

.modal-dialog {
  margin: auto;
}

This will always center it vertically and horizontal.