Web Designer Wall

Snippets Form

Bootstrap 5 Sliding Sign In / Sign Up Form

A split-screen authentication card where a branded panel slides across to switch between sign-in and sign-up, collapsing to a simple toggle on small screens.

Bootstrap 5 No jQuery Nov 2020 2.1K views 

<section class="wdw-stage">
  <div class="container" style="max-width:920px">
    <div class="slide-auth wdw-card" id="slideAuth">
      <div class="sa-panel sa-in">
        <form id="signInForm" novalidate>
          <h1 class="wdw-heading h3 mb-1">Welcome back</h1>
          <p class="wdw-muted mb-4">Sign in to continue to your dashboard.</p>
          <div class="d-flex gap-2 mb-3">
            <button type="button" class="btn btn-outline-secondary rounded-pill flex-fill"><svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><text x="12" y="18.5" text-anchor="middle" font-size="20" font-weight="800" font-family="Plus Jakarta Sans, system-ui, sans-serif" fill="currentColor">G</text></svg><span>Google</span></button>
            <button type="button" class="btn btn-outline-secondary rounded-pill flex-fill"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5a11.5 11.5 0 00-3.64 22.41c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.52-1.33-1.28-1.69-1.28-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.19 1.76 1.19 1.03 1.76 2.69 1.25 3.35.96.1-.75.4-1.25.73-1.54-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.28 1.18-3.09-.12-.29-.51-1.46.11-3.05 0 0 .97-.31 3.17 1.18a11 11 0 015.77 0c2.2-1.49 3.17-1.18 3.17-1.18.62 1.59.23 2.76.11 3.05.74.81 1.18 1.83 1.18 3.09 0 4.42-2.7 5.4-5.27 5.68.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0012 .5z"/></svg><span>GitHub</span></button>
          </div>
          <div class="d-flex align-items-center gap-3 text-body-secondary small mb-3"><hr class="flex-grow-1 m-0"><span>or with email</span><hr class="flex-grow-1 m-0"></div>
          <div class="mb-3">
            <label for="siEmail" class="form-label fw-semibold small">Email</label>
            <input type="email" class="form-control" id="siEmail" placeholder="[email protected]" autocomplete="email" required>
          </div>
          <div class="mb-2">
            <label for="siPass" class="form-label fw-semibold small">Password</label>
            <input type="password" class="form-control" id="siPass" placeholder="Your password" autocomplete="current-password" required>
          </div>
          <div class="text-end mb-3"><a href="#" class="small fw-semibold text-decoration-none">Forgot password?</a></div>
          <button type="submit" class="btn btn-primary rounded-pill w-100">Sign in</button>
          <p class="d-md-none text-center small wdw-muted mt-3 mb-0">New here? <button type="button" class="btn btn-link p-0 min-h-0 align-baseline fw-semibold text-decoration-none" data-sa-go="up">Create an account</button></p>
        </form>
      </div>
      <div class="sa-panel sa-up" aria-hidden="true">
        <form id="signUpForm" novalidate>
          <h1 class="wdw-heading h3 mb-1">Create account</h1>
          <p class="wdw-muted mb-4">It takes less than a minute.</p>
          <div class="d-flex gap-2 mb-3">
            <button type="button" class="btn btn-outline-secondary rounded-pill flex-fill"><svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><text x="12" y="18.5" text-anchor="middle" font-size="20" font-weight="800" font-family="Plus Jakarta Sans, system-ui, sans-serif" fill="currentColor">G</text></svg><span>Google</span></button>
            <button type="button" class="btn btn-outline-secondary rounded-pill flex-fill"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5a11.5 11.5 0 00-3.64 22.41c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.52-1.33-1.28-1.69-1.28-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.19 1.76 1.19 1.03 1.76 2.69 1.25 3.35.96.1-.75.4-1.25.73-1.54-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.28 1.18-3.09-.12-.29-.51-1.46.11-3.05 0 0 .97-.31 3.17 1.18a11 11 0 015.77 0c2.2-1.49 3.17-1.18 3.17-1.18.62 1.59.23 2.76.11 3.05.74.81 1.18 1.83 1.18 3.09 0 4.42-2.7 5.4-5.27 5.68.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0012 .5z"/></svg><span>GitHub</span></button>
          </div>
          <div class="d-flex align-items-center gap-3 text-body-secondary small mb-3"><hr class="flex-grow-1 m-0"><span>or with email</span><hr class="flex-grow-1 m-0"></div>
          <div class="mb-3">
            <label for="suName" class="form-label fw-semibold small">Name</label>
            <input type="text" class="form-control" id="suName" placeholder="Your name" autocomplete="name" required>
          </div>
          <div class="mb-3">
            <label for="suEmail" class="form-label fw-semibold small">Email</label>
            <input type="email" class="form-control" id="suEmail" placeholder="[email protected]" autocomplete="email" required>
          </div>
          <div class="mb-3">
            <label for="suPass" class="form-label fw-semibold small">Password</label>
            <input type="password" class="form-control" id="suPass" placeholder="At least 8 characters" autocomplete="new-password" minlength="8" required>
          </div>
          <button type="submit" class="btn btn-primary rounded-pill w-100">Sign up</button>
          <p class="d-md-none text-center small wdw-muted mt-3 mb-0">Already registered? <button type="button" class="btn btn-link p-0 min-h-0 align-baseline fw-semibold text-decoration-none" data-sa-go="in">Sign in</button></p>
        </form>
      </div>
      <div class="sa-overlay wdw-aurora d-none d-md-flex">
        <div class="sa-msg sa-msg-up">
          <h2 class="fw-bold mb-2">New here?</h2>
          <p class="mb-4 opacity-75">Create an account and start your journey with us.</p>
          <button type="button" class="btn btn-outline-light rounded-pill px-4" data-sa-go="up">Sign up</button>
        </div>
        <div class="sa-msg sa-msg-in">
          <h2 class="fw-bold mb-2">Welcome back!</h2>
          <p class="mb-4 opacity-75">Already have an account? Sign in to pick up where you left off.</p>
          <button type="button" class="btn btn-outline-light rounded-pill px-4" data-sa-go="in">Sign in</button>
        </div>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More Form snippets