Centering Bootstrap modal in wide pages

Question

On mobile devices, the Bootstrap modal is not centered correctly when the page is wider than 980px, leaving white space on the right of the screen.

I don't want to use a meta viewport that will zoom the page in as I need the full width to show on mobile devices.

The snippet below is using Bootstrap 5. I tried 3 and 4 too.

You can see in the screenshot that the modal div is positioned out of the screen and the backdrop doesn't cover the full width, leaving white space on the right and also pushing page content (the button) to the left.

<-- invisible whitespace in image

You can see it here with a phone or using chrome mobile device mode

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  <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>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
    crossorigin="anonymous"></script>

</head>

<body class="text-center">
  <style>
    body {
      width: 1035px;
    }

    #open-button {
      font-size: 32px;
    }
  </style>

  <!-- Button trigger modal -->
  <button id="open-button" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
  </button>

  <div>
    <img src="https://via.placeholder.com/1024" alt="">
  </div>
  <!-- Modal -->
  <div class="modal fade mx-auto" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

I don't see either of the things you describe in your screenshot _or_ in the demo. What am I missing? — isherwood, Sep 22 '22 at 19:06
I see now that the screenshot has whitespace that's invisible here. I did test your demo on Android (Pixel 5 in landscape) and Chrome's emulator, though, and it's fine. — isherwood, Sep 22 '22 at 19:09
@isherwood You can see it here (same code) with your phone/chrome emulation https://vitkinsnakes.com/modal-bs5.htm — ramiwi, Sep 22 '22 at 19:29
@isherwood [see the resolution settings here](https://imgur.com/a/GQ4etxh) — ramiwi, Sep 22 '22 at 19:38
I'm confused. Above you said "when the page is wider than 980px". — isherwood, Sep 22 '22 at 19:45
Adding the [standard meta scale tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_basics) seems to resolve it. — isherwood, Sep 22 '22 at 19:49
[I tried it but it breaks on my site. will try to create a closer demo](https://imgur.com/a/Cjrkszz) — ramiwi, Sep 22 '22 at 20:07
@isherwood I dont want the page to zoom in (as it does with the scale tag) [see here](https://vitkinsnakes.com/modal-bs5img.htm) — ramiwi, Sep 22 '22 at 22:37
I know, but for now the client prefer it like this and Im just looking for a solution to this bootstap modal behaviour. — ramiwi, Sep 23 '22 at 13:09
Fair enough, but I'd say it's your job to sell a good, accessible UX. — isherwood, Sep 23 '22 at 13:12

Centering Bootstrap modal in wide pages

0 Answers0