Modal

<!-- Modal markup -->
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">Modal title</h5>
    <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">
    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary btn-sm">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 mb-0" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" href="#signin" data-bs-toggle="tab" role="tab" aria-selected="true">
          <i class="fi-login fs-sm me-2 ms-n1"></i>
          Sign in
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#signup" data-bs-toggle="tab" role="tab" aria-selected="false">
          <i class="fi-user fs-sm me-2 ms-n1"></i>
          Sign up
        </a>
      </li>
    </ul>
    <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
  </div>
  <div class="modal-body tab-content py-4">
    <form class="tab-pane fade show active" autocomplete="off" id="signin">
      <div class="mb-3">
        <label class="form-label" for="email1">Email address</label>
        <input class="form-control" type="email" id="email1" placeholder="johndoe@example.com">
      </div>
      <div class="mb-3">
        <label class="form-label" for="pass1">Password</label>
        <div class="password-toggle">
          <input class="form-control" type="password" 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-3 d-flex flex-wrap justify-content-between">
        <div class="form-check mb-2">
          <input class="form-check-input" type="checkbox" id="remember">
          <label class="form-check-label" for="remember">Remember me</label>
        </div>
        <a class="fs-sm" href="#">Forgot password?</a>
      </div>
      <button class="btn btn-primary d-block w-100" type="submit">Sign in</button>
    </form>
    <form class="tab-pane fade" autocomplete="off" id="signup">
      <div class="mb-3">
        <label class="form-label" for="name">Full name</label>
        <input class="form-control" type="text" id="name" placeholder="John Doe">
      </div>
      <div class="mb-3">
        <label class="form-label" for="email2">Email address</label>
        <input class="form-control" type="email" id="email2" placeholder="johndoe@example.com">
      </div>
      <div class="mb-3">
        <label class="form-label" for="pass2">Password</label>
        <div class="password-toggle">
          <input class="form-control" type="password" id="pass2">
          <label class="password-toggle-btn">
            <input class="password-toggle-check" type="checkbox">
            <span class="password-toggle-indicator"></span>
          </label>
        </div>
      </div>
      <div class="mb-3">
        <label class="form-label" for="pass3">Confirm password</label>
        <div class="password-toggle">
          <input class="form-control" type="password" id="pass3">
          <label class="password-toggle-btn">
            <input class="password-toggle-check" type="checkbox">
            <span class="password-toggle-indicator"></span>
          </label>
        </div>
      </div>
      <button class="btn btn-primary d-block w-100" type="submit">Sign up</button>
    </form>
  </div>
</div>
</div>
</div

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

<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalSmall">
Small modal
</button>

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

<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalDefault">
Default modal
</button>

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

<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalLarge">
Large modal
</button>

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

<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalXL">
Extra large modal
</button>

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

<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalScroll">
Srolling content
</button>

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

<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalCentered">
Vertically centered modal
</button>

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

<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalFullScreen">
Full screen modal
</button