##### Modal title

...

##### Modal title

Modal body text goes here.

##### Modal title

Modal body text goes here.

##### Modal title

Modal body text goes here.

##### Modal title

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

##### Modal title

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

##### Modal title

Modal body text goes here.

##### Modal title

Modal body text goes here.

Bootstrap docs

# Modal

Dialogs for lightboxes, user notifications, or completely custom content.

#### Modal markup

##### Modal title

Modal body content goes here.

    <!-- Basic modal markup -->
    <div class="modal fade" 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 class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p>Modal body content goes here.</p>
          </div>
          <div class="modal-footer flex-column flex-sm-row align-items-stretch">
            <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>

#### Tabs and forms

## Welcome back

Remember for 30 days

## Create an account

Email
Password
Save the password

    <!-- Custom modal markup with tabs, forms and cover image -->
    <div class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content row row-cols-1 row-cols-lg-2 flex-row g-0 overflow-hidden">
          <div class="col order-lg-2">
            <div class="position-relative d-flex align-items-end h-100 pt-4 px-4 px-sm-5 px-lg-0">
              <button type="button" class="btn-close position-absolute top-0 end-0 z-2 mt-3 me-3" data-bs-dismiss="modal" aria-label="Close"></button>
              <div class="ratio position-relative z-1" style="--cz-aspect-ratio: calc(1030 / 1032 * 100%)">
                <img src="assets/img/account/cover.png" alt="Girl">
              </div>
              <span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark" style="background: linear-gradient(-90deg, #accbee 0%, #e7f0fd 100%)"></span>
              <span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark" style="background: linear-gradient(-90deg, #1b273a 0%, #1f2632 100%)"></span>
            </div>
          </div>
          <div class="col d-flex flex-column order-lg-1">
            <div class="modal-header d-block border-0 pt-sm-5 px-sm-5 pb-2">
              <ul class="nav nav-tabs mt-sm-n2" role="tablist">
                <li class="nav-item" role="presentation">
                  <button type="button" class="nav-link text-nowrap active" data-bs-toggle="tab" data-bs-target="#signin" role="tab" aria-controls="signin" aria-selected="true">
                    <i class="ci-log-in fs-base opacity-75 ms-n1 me-2"></i>
                    Sign in
                  </button>
                </li>
                <li class="nav-item" role="presentation">
                  <button type="button" class="nav-link text-nowrap" data-bs-toggle="tab" data-bs-target="#signup" role="tab" aria-controls="signup" aria-selected="false">
                    <i class="ci-user fs-base opacity-75 ms-n1 me-2"></i>
                    Sign up
                  </button>
                </li>
              </ul>
            </div>
            <div class="modal-body tab-content px-sm-5 pb-sm-5">
              <div class="tab-pane fade show active" id="signin" role="tabpanel">
                <h2 class="h5 mb-4">Welcome back</h2>
                <form>
                  <div class="position-relative mb-4">
                    <input type="email" class="form-control" placeholder="Email" required>
                  </div>
                  <div class="mb-4">
                    <div class="password-toggle">
                      <input type="password" class="form-control" placeholder="Password" required>
                      <label class="password-toggle-button fs-lg" aria-label="Show/hide password">
                        <input type="checkbox" class="btn-check">
                      </label>
                    </div>
                  </div>
                  <div class="form-check mb-4">
                    <input type="checkbox" class="form-check-input" id="remember-30">
                    <label for="remember-30" class="form-check-label">Remember for 30 days</label>
                  </div>
                  <button type="submit" class="btn btn-primary w-100">Sign In</button>
                </form>
              </div>
              <div class="tab-pane fade" id="signup" role="tabpanel">
                <h2 class="h5">Create an account</h2>
                <form>
                  <div class="position-relative mb-3">
                    <label for="register-email" class="form-label">Email</label>
                    <input type="email" class="form-control" id="register-email" required>
                  </div>
                  <div class="mb-4">
                    <label for="register-password" class="form-label">Password</label>
                    <div class="password-toggle">
                      <input type="password" class="form-control" id="register-password" minlength="8" placeholder="Minimum 8 characters" required>
                      <label class="password-toggle-button fs-lg" aria-label="Show/hide password">
                        <input type="checkbox" class="btn-check">
                      </label>
                    </div>
                  </div>
                  <div class="d-flex flex-column gap-2 mb-4">
                    <div class="form-check">
                      <input type="checkbox" class="form-check-input" id="save-pass">
                      <label for="save-pass" class="form-check-label">Save the password</label>
                    </div>
                  </div>
                  <button type="submit" class="btn btn-primary w-100">Create an account</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

#### Live demo

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

Top