HTML Modal not showing when button is clicked, and is displacing other elements when hidden

I am not sure where I am going wrong. This is my first time working with modals, but it is necessary to allow my users to sign up with the service. I am following bootstraps tutorial for modals hence why they are boilerplate at the moment. I am not able to get it to show when the "Sign Up" button is clicked.

As it stands the modal is moving all my current html elements around, but will not show when the button is clicked.

<section>
    <div class="page-header min-vh-100">
      <div class="container">
        <div class="row">
          <div class="col-xl-4 col-lg-5 col-md-7 d-flex flex-column mx-lg-0 mx-auto">
            {{ form.csrf_token }}
              <div id="login-card" class="card card-plain">
                <div class="card-header pb-0 text-left">
                  <h4 class="font-weight-bolder">Welcome back</h4>
                  <p class="mb-0">Sign in to start exploring Fellos' podcast builder</p>
                </div>
                <div id="signincard" class="card-body">
                  
                  <div id="emaildiv">
                    {{form.email}}
                  </div>

                  <div id="passworddiv">
                    {{form.password}}
                  </div>
                  <input class="btn btn-lg bg-gradient-primary btn-lg w-100 mt-4 mb-0" id="login-button" name="submit" type="button" value="Sign In" data-clipboard-target="#query">

                  <div id="forgot_or_signup">
                    <button id="forgotpass" type="button">Forgot Password?</button>
                    <button id="sign_up" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                      Sign Up!
                    </button>
                    <!-- Modal -->
                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                      <div class="modal-dialog" role="document">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">×</span>
                            </button>
                          </div>
                          <div class="modal-body">
                            ...
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    
               
                </div>
                
              </div>
          
          <div class="col-6 d-lg-flex d-none h-100 my-auto pe-0 position-absolute top-0 end-0 text-center justify-content-center flex-column">
            <div class="position-relative h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center" style="background-color: black;">
              <img src="{{ url_for('static', filename='assets/img/shapes/pattern-lines.svg') }}" alt="pattern-lines" class="position-absolute opacity-8 start-0">
              <div class="position-relative mt-6">
                <img class="max-width-500 w-100 position-relative z-index-2" src="{{ url_for('static', filename='assets/img/WELLFOUND_EMBLEM_WHITE.png') }}" alt="image">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

If you are using bootstrap 5.3 then you need to change this attributes.

in sign up button, change this data-toggle in to this data-bs-toggle

<button id="sign_up" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Sign Up! </button>

as will as the close button of the modal from data-dismiss to data-bs-dismiss

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">×</span>
                            </button>

<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

Test this in your own.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</head>

<body>
  <section>
    <div class="page-header min-vh-100">
      <div class="container">
        <div class="row">
          <div class="col-xl-4 col-lg-5 col-md-7 d-flex flex-column mx-lg-0 mx-auto">
            {{ form.csrf_token }}
            <div id="login-card" class="card card-plain">
              <div class="card-header pb-0 text-left">
                <h4 class="font-weight-bolder">Welcome back</h4>
                <p class="mb-0">Sign in to start exploring Fellos' podcast builder</p>
              </div>
              <div id="signincard" class="card-body">

                <div id="emaildiv">
                  {{form.email}}
                </div>

                <div id="passworddiv">
                  {{form.password}}
                </div>
                <input class="btn btn-lg bg-gradient-primary btn-lg w-100 mt-4 mb-0" id="login-button" name="submit" type="button" value="Sign In" data-clipboard-target="#query">

                <div id="forgot_or_signup">
                  <button id="forgotpass" type="button">Forgot Password?</button>
                  <button id="sign_up" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                          Sign Up!
                        </button>

                  <!-- Modal -->
                  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                      <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">
                                  <span aria-hidden="true">×</span>
                                </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>
                </div>

              </div>

            </div>
          </div>
        </div>
  </section>
</body>

<!-- end snippet -->