Modal backdrop login bootstrap 5.1.3 com icone


Veja como fazer um login  Modal backdrop login bootstrap 5.1.3 com icone.

Estilo dark.

Código gerado

  <style>
    .big-icon {
      font-size: 10em;
    }
  </style>
  <!-- Modal -->
  <div id="login_modal" class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down">
      <div class="modal-content bg-dark bg-gradient opacity-75">

        <div class="modal-body">
          <div class="row">
            <div class="col-12 mx-auto">
              <div class="text-center">
                <i class="bi bi-person-circle text-white big-icon"></i>
              </div>

              <form class="row g-3">
                <div class="col-12">
                  <input type="text" class="form-control" name="" value="" placeholder="E-mail">
                </div>
                <div class="col-12">
                  <input type="text" class="form-control" name="" value="" placeholder="password">
                </div>
                <div class="col-12">
                  <button type="button" name="button" class="btn btn-dark float-end shadow-sm  bg-gradient fw-bolder px-5">Enter</button>
                </div>
              </form>

            </div>
          </div>
        </div>
        <div class="modal-footer justify-content-between text-white p-0 px-3">

          <span> <a href="#">Reset password</a></span>
          <span>Not a member yet? <a href="#">Sign Up</a>.</span>
        </div>
      </div>
    </div>
  </div>
  <script>
    window.addEventListener("load", function(event) {
      let myModalElement = document.getElementById('login_modal');
      let myModal = new bootstrap.Modal(myModalElement, {
        keyboard: false
      });
      myModal.show();

      console.log("Todos os recursos terminaram o carregamento!");
    });
  </script>