Modal

<!-- Modal markup -->
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal title</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer flex-column flex-sm-row">
        <button type="button" class="btn btn-secondary w-100 w-sm-auto mb-3 mb-sm-0" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary w-100 w-sm-auto ms-sm-3">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal with tabs and forms -->
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <ul class="nav nav-tabs flex-nowrap text-nowrap mb-n2" role="tablist">
          <li class="nav-item">
            <a href="#signin" class="nav-link flex-column flex-sm-row px-3 px-sm-4 active" data-bs-toggle="tab" role="tab" aria-selected="true">
              <i class="ai-login me-sm-2 ms-sm-n1"></i>
              <span class="d-none d-sm-inline">Sign in</span>
              <span class="fs-sm fw-medium d-sm-none pt-1">Sign in</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#signup" class="nav-link flex-column flex-sm-row px-3 px-sm-4" data-bs-toggle="tab" role="tab" aria-selected="false">
              <i class="ai-user me-sm-2 ms-sm-n1"></i>
              <span class="d-none d-sm-inline">Sign up</span>
              <span class="fs-sm fw-medium d-sm-none pt-1">Sign up</span>
            </a>
          </li>
        </ul>
        <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body tab-content">
        <form class="tab-pane fade show active mt-n2" id="signin" autocomplete="off">
          <div class="mb-3 mb-sm-4">
            <label for="email1" class="form-label">Email address</label>
            <input type="email" class="form-control" id="email1" placeholder="johndoe@example.com">
          </div>
          <div class="mb-3 mb-sm-4">
            <label for="pass1" class="form-label">Password</label>
            <div class="password-toggle">
              <input type="password" class="form-control" id="pass1">
              <label class="password-toggle-btn">
                <input class="password-toggle-check" type="checkbox">
                <span class="password-toggle-indicator"></span>
              </label>
            </div>
          </div>
          <div class="mb-4 d-flex flex-wrap justify-content-between">
            <div class="form-check mb-2">
              <input type="checkbox" class="form-check-input" id="remember">
              <label for="remember" class="form-check-label">Remember me</label>
            </div>
            <a href="#" class="fs-sm">Forgot password?</a>
          </div>
          <button type="submit" class="btn btn-primary w-100">Sign in</button>
        </form>
        <form class="tab-pane fade" id="signup" autocomplete="off">
          <div class="mb-3 mb-sm-4">
            <label for="name" class="form-label">Full name</label>
            <input type="text" class="form-control" id="name" placeholder="John Doe">
          </div>
          <div class="mb-3 mb-sm-4">
            <label for="email2" class="form-label">Email address</label>
            <input type="email" class="form-control" id="email2" placeholder="johndoe@example.com">
          </div>
          <div class="mb-3 mb-sm-4">
            <label for="pass2" class="form-label">Password</label>
            <div class="password-toggle">
              <input type="password" class="form-control" id="pass2">
              <label class="password-toggle-btn">
                <input type="checkbox" class="password-toggle-check">
                <span class="password-toggle-indicator"></span>
              </label>
            </div>
          </div>
          <div class="mb-4">
            <label for="pass3" class="form-label">Confirm password</label>
            <div class="password-toggle">
              <input type="password" class="form-control" id="pass3">
              <label class="password-toggle-btn">
                <input type="checkbox" class="password-toggle-check">
                <span class="password-toggle-indicator"></span>
              </label>
            </div>
          </div>
          <button type="submit" class="btn btn-primary w-100">Sign up</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Launch modal button -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalId">
Launch modal
</button>

<!-- Small modal -->
<div class="modal fade" id="modalId" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
    ...
    </div>
  </div>
</div>

<!-- Default modal -->
<div class="modal fade" id="modalId" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
    ...
    </div>
  </div>
</div>

<!-- Large modal -->
<div class="modal fade" id="modalId" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
    ...
    </div>
  </div>
</div>

<!-- Extra large modal -->
<div class="modal fade" id="modalId" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
    ...
    </div>
  </div>
</div>

<!-- Modal with srolling content -->
<div class="modal fade" id="modalId" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
    ...
    </div>
  </div>
</div>

<!-- Vertically centered modal -->
<div class="modal fade" id="modalId" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
    ...
    </div>
  </div>
</div>

<!-- Full screen modal -->
<div class="modal fade" id="modalId" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-fullscreen" role="document">
    <div class="modal-content">
    ...
    </div>
  </div>
</div>