How to fix - The modal dissapear below 992px.?

Question

I am trying to create a modal, but when I make it, it disappears below 992px which is one of the Bootstrap's breakpoints. I made the modal like one of the examples in the docs. I have tried many solution including CSS changing the class modal to position fixed, but without success.

Also tried:

• CSS changing the class "modal"
• Modifying the browser z-index
• Activating and deactivating things in the inspector

Code Snippet (GitHub Source)

new bootstrap.Modal('#MyProfile').show();

<div class="modal" id="MyProfile" tabindex="-1" aria-labelledby="MyProfile" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered-fix ">
    <div class="modal-content modal-MyProfile-fix">
      <div class="modal-header">
        <h5 class="modal-title text-center pop-up-header" id="MyProfileLabel">Моят профил</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <h3>Лични данни</h3>
        <div class="mx-1">
          <form class="input-MyProfile needs-validation was-validated" novalidate="">
            <input type="text" class="form-control" id="MyProfile-Validation01" placeholder="Име" value="Иван" required>

            <input type="text" class="form-control" id="MyProfile-Validation02" placeholder="Фамилия" value="Иванов" required>

            <input type="number" class="form-control" id="MyProfile-Validation03" placeholder="Телефон" required>

            <input type="text" class="form-control" id="MyProfile-Validation04" placeholder="Имейл" value="[email protected]" required>

          </form>

        </div>
        <h3>Изтриване на профила</h3>
        <div class="mb-1 mx-1" style="width: 100%;">
          <p>Ако изтриете профила си, всички лични данни ще бъдат премахнати. Изтриването е необратим процес.
          </p>
          <a href="" class="btn-razgledai">Изтрий</a>
        </div>
        <h3>Предпочитан начин за връзка</h3>
        <div class="mb-1 mx-1" style="width: 100%;">
          <p>
            <ion-icon name="checkmark-outline"></ion-icon> по телефона
          </p>
          <p>
            <ion-icon name="checkmark-outline"></ion-icon> по Имейл
          </p>
        </div>
        <h3>Свързване</h3>
        <div class="mb-1 mx-1 row" style="width: 100%;">
          <div class="col-6">
            <p class="profile-facebook">
              <ion-icon class="profile-facebook" name="logo-facebook"></ion-icon> Facebook
            </p>
            <p class="profile-google">
              <ion-icon class="profile-google" name="logo-google"></ion-icon>
              Google</p>
          </div>
          <div class="col-6 text-end">
            <p class="profile-facebook">Свържи</p>
            <p class="profile-google">
              <ion-icon class="profile-google" name="trash-bin-outline"></ion-icon>
            </p>
          </div>
        </div>
      </div>
      <div class="modal-footer justify-content-center">
        <button type="button" class="btn-razgledai text-center" data-bs-dismiss="modal">Запази</button>
      </div>
    </div>
  </div>
</div>

<!-- Bootstrap 5 -->

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" ></script>