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

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.

Answer 2

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 3

In Bootstrap documentation, there are different styling options you could choose from. But particularly, this should solve your issues;

   <Modal
  {...props}
  size="lg"
  aria-labelledby="contained-modal-title-vcenter"
  centered
>
  <Modal.Header closeButton>
    <Modal.Title id="contained-modal-title-vcenter">
      Modal heading
    </Modal.Title>
  </Modal.Header>
  <Modal.Body>
    <h4>Centered Modal</h4>
    <p>
      Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
      dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
      consectetur ac, vestibulum at eros.
    </p>
  </Modal.Body>
  <Modal.Footer>
    <Button onClick={props.onHide}>Close</Button>
  </Modal.Footer>
</Modal>