Have Bootstrap 5 modal and backdrop take up the parent container width and height and not the full screen

Question

Is there a way to limit the size of bootstrap 5 modal dialog and backdrop?

The example below is occupying 100% of the screen, is it possible to make it cover only the parent main container?

<main class="container-fluid pt-4 px-4" style="height: 400px">
                <!-- Button trigger modal -->
                <button
                    type="button"
                    class="btn btn-primary"
                    data-bs-toggle="modal"
                    data-bs-target="#exampleModal"
                >
                    Launch demo modal
                </button>

                <!-- Modal -->
                <div
                    class="modal fade hide"
                    data-backdrop="false"
                    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>
            </main>

I added the CSS below but not working.

.modal-dialog, .modal-backdrop {
/* supposed to take the height and width of parent container */
       height: 100% !important; 
       width: 100% !important;
 }

How it works:

What I want (or expected behavior):

Answer 1

The modal component adds a the backdrop element (outside the .modal's parent) automatically, so if you want the modal to be completely contained inside the parent, start by disabling the backdrop with data-bs-backdrop="false".
By default the .modal has position: fixed so it gets rendered relative to the viewport without regards to its parent element(s). This behavior can be overridden by giving the (main) parent position: relative; and give the .modal child position: absolute;. You can also give the .modal an rgba() background-color to simulate an encapsulated, static backdrop within the parent only (clicking on a static backdrop does not close the modal).
To have the modal centered within the parent add .modal-dialog-centered to the .modal-dialog.
In the snippet below I have given both main and .modal a background to more clearly demonstrate:

main {
  position: relative;
  background: #EEE;
}

main .modal {
  position: absolute;
  background: rgba(0, 100, 0, 0.35);
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="col-2">
      sidebar
    </div>
    <div class="col-10">
      <div class="row">
        <nav class="navbar bg-light">
          <div class="container-fluid">
            <a class="navbar-brand" href="#">Navbar</a>
          </div>
        </nav>
      </div>
      <div class="row">
        <main class="container-fluid pt-4 px-4" style="height: 400px">
          <!-- Button trigger modal -->
          <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
            Launch demo modal
          </button>

          <!-- Modal -->
          <div class="modal fade hide" data-bs-backdrop="false" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <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 flex-grow-1">...</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>
        </main>

      </div>
    </div>
  </div>
</div>



<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>