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 markup
.modal(tabindex="-1", role="dialog")
  .modal-dialog(role="document")
    .modal-content
      .modal-header
        h5.modal-title
          | Modal title
        button(type="button", class="btn-close", data-bs-dismiss="modal", aria-label="Close")
      .modal-body
        p Modal body text goes here.
      .modal-footer
        button(type="button", class="btn btn-secondary btn-sm", data-bs-dismiss="modal")
          | Close
        button(type="button", class="btn btn-primary btn-sm")
          | Save changes

<!-- 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>

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

<!-- 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>

// Small modal
div(id="modalSmall", tabindex="-1", role="dialog").modal.fade
  .modal-dialog.modal-sm(role="document")
    ...

button(type="button", class="btn btn-outline-secondary", data-bs-toggle="modal", data-bs-target="#modalSmall")
  | Small modal

// Default modal
div(id="modalDefault", tabindex="-1", role="dialog").modal.fade
  .modal-dialog(role='document')
    ...

button(type="button", class="btn btn-outline-secondary", data-bs-toggle="modal", data-bs-target="#modalDefault")
  | Default modal

// Large modal
div(id="modalLarge", tabindex="-1", role="dialog").modal.fade
  .modal-dialog.modal-lg(role='document')
    ...
    
button(type="button", class="btn btn-outline-secondary", data-bs-toggle="modal", data-bs-target="#modalLarge")
  | Large modal

// Extra large modal
div(id="modalXL", tabindex="-1", role="dialog").modal.fade
  .modal-dialog.modal-xl(role='document')
    ...

button(type="button", class="btn btn-outline-secondary", data-bs-toggle="modal", data-bs-target="#modalXL")
  | Extra large modal

// Modal with srolling content
div(id="modalScroll", tabindex="-1", role="dialog").modal.fade
  .modal-dialog.modal-dialog-scrollable(role='document')
    ...

button(type="button", class="btn btn-outline-secondary", data-bs-toggle="modal", data-bs-target="#modalScroll")
  | Srolling content

// Vertically centered modal
div(id="modalCentered", tabindex="-1", role="dialog").modal.fade
  .modal-dialog.modal-dialog-centered(role='document')
    ...
    
button(type="button", class="btn btn-outline-secondary", data-bs-toggle="modal", data-bs-target="#modalCentered")
  | Vertically centered modal

// Full screen modal
div(id="modalFullScreen", tabindex="-1", role="dialog").modal.fade
  .modal-dialog.modal-fullscreen(role='document')
    ...

button(type="button", class="btn btn-outline-secondary", data-bs-toggle="modal", data-bs-target="#modalFullScreen")
  | Full screen modal