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="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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-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-toggle="tab" role="tab" aria-selected="true">
              <i class="cxi-login mr-2 mt-n1 ml-n1"></i>
              Sign in
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#signup"data-toggle="tab" role="tab" aria-selected="false">
              <i class="cxi-profile mr-2 mt-n1 ml-n1"></i>
              Sign up
            </a>
          </li>
        </ul>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body tab-content py-4">
        <form class="tab-pane fade show active" id="signin" autocomplete="off">
          <div class="form-group">
            <label for="email1" class="form-label">Email address</label>
            <input class="form-control" type="email" id="email1" placeholder="johndoe@example.com">
          </div>
          <div class="form-group">
            <label class="form-label" for="pass1">Password</label>
            <div class="cs-password-toggle input-group-overlay">
              <input class="form-control appended-form-control" type="password" id="pass1">
              <div class="input-group-append-overlay">
                <label class="btn cs-password-toggle-btn input-group-text">
                  <input class="custom-control-input" type="checkbox">
                  <i class="cxi-eye cs-password-toggle-indicator"></i>
                  <span class="sr-only">Show password</span>
                </label>
              </div>
            </div>
          </div>
          <div class="form-group d-flex flex-wrap justify-content-between">
            <div class="custom-control custom-checkbox mb-2">
              <input class="custom-control-input" type="checkbox" id="remember">
              <label class="custom-control-label" for="remember">Remember me</label>
            </div>
            <a class="font-size-sm" href="#">Forgot password?</a>
          </div>
          <button class="btn btn-primary btn-block" type="submit">Sign in</button>
        </form>
        <form class="tab-pane fade" id="signup" autocomplete="off">
          <div class="form-group">
            <label for="name" class="form-label">Full name</label>
            <input class="form-control" type="text" id="name" placeholder="John Doe">
          </div>
          <div class="form-group">
            <label for="email2" class="form-label">Email address</label>
            <input class="form-control" type="email" id="email2" placeholder="johndoe@example.com">
          </div>
          <div class="form-group">
            <label class="form-label" for="pass2">Password</label>
            <div class="cs-password-toggle input-group-overlay">
              <input class="form-control appended-form-control" type="password" id="pass2">
              <div class="input-group-append-overlay">
                <label class="btn cs-password-toggle-btn input-group-text">
                  <input class="custom-control-input" type="checkbox">
                  <i class="cxi-eye cs-password-toggle-indicator"></i>
                  <span class="sr-only">Show password</span>
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="form-label" for="pass3">Password</label>
            <div class="cs-password-toggle input-group-overlay">
              <input class="form-control appended-form-control" type="password" id="pass3">
              <div class="input-group-append-overlay">
                <label class="btn cs-password-toggle-btn input-group-text">
                  <input class="custom-control-input" type="checkbox">
                  <i class="cxi-eye cs-password-toggle-indicator"></i>
                  <span class="sr-only">Show password</span>
                </label>
              </div>
            </div>
          </div>
          <button class="btn btn-primary btn-block" type="submit">Sign in</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Make sure the actual modal markup is present on the page and has the right id -->

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

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

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

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

<!-- Launch long modal -->
<button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#modalLong">
  Long modal
</button>

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

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