How to correctly center bootstrap wide modal?

On mobile devices, Bootstrap modal is not centered correctly when body min-width is wider than 980px.

I tried bootstrap 4, bootstrap 5 and bootstrap 3 modals.

You can see in the screenshot that the modal div is positioned out of the screen and the backdrop doesnt cover the full width, leaving white space on the right.

<!DOCTYPE html>
<html dir="rtl">

<head>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>

</head>

<body>
  <style>
    body {
      min-width: 1035px;
    }
  </style>

  <button class="btn btn-lg btn-primary center-block text-" data-remote="false" data-toggle="modal"
    data-target="#myModal">show modal</button>

  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
          some content
        </div>
      </div>
    </div>
  </div>

</body>

</html>

How to correctly center bootstrap wide modal?

1 Answers