Web Designer Wall

Snippets Form

Bootstrap 5 Login and Sign Up Form with Sliding Panel

A login and sign-up card with a sliding gradient panel that swaps between the two forms; on phones it collapses to a single form with a text switch.

Bootstrap 5 No jQuery Dec 2020 15.2K views 

<section class="auth-section wdw-stage">
  <div class="container">
    <div class="auth card border-0 shadow-sm auth-shadow rounded-4 overflow-hidden mx-auto" id="authCard" data-mode="login">
      <div class="auth-panel auth-login">
        <div class="auth-strip wdw-aurora d-md-none" aria-hidden="true"><span class="auth-strip-mark">A</span><span class="fw-semibold">Acme Studio</span></div>
        <form class="auth-form" novalidate onsubmit="return false">
          <h1 class="h3 fw-bold text-body-emphasis mb-2">Welcome back</h1>
          <p class="text-body-secondary mb-4">Log in to pick up where you left off.</p>
          <button type="button" class="btn btn-social w-100 d-flex align-items-center justify-content-center gap-2 mb-3 py-2 rounded-3"><svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><path fill="#4285F4" d="M23 12.3c0-.8-.1-1.5-.2-2.2H12v4.2h6.2a5.3 5.3 0 0 1-2.3 3.5v2.9h3.7c2.2-2 3.4-5 3.4-8.4z"/><path fill="#34A853" d="M12 23.5c3.1 0 5.7-1 7.6-2.8l-3.7-2.9c-1 .7-2.3 1.1-3.9 1.1-3 0-5.5-2-6.4-4.7H1.8v3A11.5 11.5 0 0 0 12 23.5z"/><path fill="#FBBC05" d="M5.6 14.2a6.9 6.9 0 0 1 0-4.4v-3H1.8a11.5 11.5 0 0 0 0 10.4z"/><path fill="#EA4335" d="M12 5.4c1.7 0 3.2.6 4.4 1.7l3.3-3.3A11.5 11.5 0 0 0 1.8 6.8l3.8 3c.9-2.7 3.4-4.4 6.4-4.4z"/></svg> Continue with Google</button>
          <div class="auth-or text-body-secondary small mb-3"><span>or with email</span></div>
          <div class="form-floating mb-3"><input type="email" class="form-control rounded-3" id="loginEmail" placeholder="Email" autocomplete="email"><label for="loginEmail">Email address</label></div>
          <div class="form-floating mb-2"><input type="password" class="form-control rounded-3" id="loginPass" placeholder="Password" autocomplete="current-password"><label for="loginPass">Password</label></div>
          <div class="text-end mb-3"><a href="#" class="small fw-medium text-decoration-none link-forgot">Forgot password?</a></div>
          <button type="submit" class="btn btn-primary btn-lg w-100 rounded-pill">Log in</button>
          <p class="d-md-none text-center text-body-secondary small mt-4 mb-0">New here? <button type="button" class="btn btn-link p-0 align-baseline small" data-auth-go="signup">Create an account</button></p>
        </form>
      </div>
      <div class="auth-panel auth-signup">
        <div class="auth-strip wdw-aurora d-md-none" aria-hidden="true"><span class="auth-strip-mark">A</span><span class="fw-semibold">Acme Studio</span></div>
        <form class="auth-form" novalidate onsubmit="return false">
          <h2 class="h3 fw-bold text-body-emphasis mb-2">Create account</h2>
          <p class="text-body-secondary mb-4">Free for 14 days. No card required.</p>
          <button type="button" class="btn btn-social w-100 d-flex align-items-center justify-content-center gap-2 mb-3 py-2 rounded-3"><svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><path fill="#4285F4" d="M23 12.3c0-.8-.1-1.5-.2-2.2H12v4.2h6.2a5.3 5.3 0 0 1-2.3 3.5v2.9h3.7c2.2-2 3.4-5 3.4-8.4z"/><path fill="#34A853" d="M12 23.5c3.1 0 5.7-1 7.6-2.8l-3.7-2.9c-1 .7-2.3 1.1-3.9 1.1-3 0-5.5-2-6.4-4.7H1.8v3A11.5 11.5 0 0 0 12 23.5z"/><path fill="#FBBC05" d="M5.6 14.2a6.9 6.9 0 0 1 0-4.4v-3H1.8a11.5 11.5 0 0 0 0 10.4z"/><path fill="#EA4335" d="M12 5.4c1.7 0 3.2.6 4.4 1.7l3.3-3.3A11.5 11.5 0 0 0 1.8 6.8l3.8 3c.9-2.7 3.4-4.4 6.4-4.4z"/></svg> Sign up with Google</button>
          <div class="auth-or text-body-secondary small mb-3"><span>or with email</span></div>
          <div class="form-floating mb-3"><input type="text" class="form-control rounded-3" id="signName" placeholder="Name" autocomplete="name"><label for="signName">Full name</label></div>
          <div class="form-floating mb-3"><input type="email" class="form-control rounded-3" id="signEmail" placeholder="Email" autocomplete="email"><label for="signEmail">Email address</label></div>
          <div class="form-floating mb-4"><input type="password" class="form-control rounded-3" id="signPass" placeholder="Password" autocomplete="new-password"><label for="signPass">Password</label></div>
          <button type="submit" class="btn btn-primary btn-lg w-100 rounded-pill">Sign up</button>
          <p class="d-md-none text-center text-body-secondary small mt-4 mb-0">Have an account? <button type="button" class="btn btn-link p-0 align-baseline small" data-auth-go="login">Log in</button></p>
        </form>
      </div>
      <div class="auth-overlay wdw-aurora d-none d-md-flex" aria-hidden="false"><span class="auth-orb auth-orb-1" aria-hidden="true"></span><span class="auth-orb auth-orb-2" aria-hidden="true"></span>
        <div class="auth-ov auth-ov-login text-center text-white">
          <h2 class="h2 fw-bold mb-2">New here?</h2>
          <p class="mb-3 opacity-75">Create an account and start building in minutes.</p>
<ul class="auth-feats list-unstyled text-start mb-4"><li><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8.5l3.2 3L13 4.5"/></svg><span>Unlimited projects and teammates</span></li><li><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8.5l3.2 3L13 4.5"/></svg><span>Live previews on every change</span></li><li><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8.5l3.2 3L13 4.5"/></svg><span>Cancel any time, no card needed</span></li></ul>
          <button type="button" class="btn btn-light btn-lg rounded-pill px-5 fw-semibold" data-auth-go="signup">Sign up</button>
        </div>
        <div class="auth-ov auth-ov-signup text-center text-white">
          <h2 class="h2 fw-bold mb-2">Already a member?</h2>
          <p class="mb-3 opacity-75">Log in to see your projects and team.</p>
          <figure class="auth-quote text-start mb-4"><blockquote class="mb-2 small">"We shipped our redesign in a week. The workflow just gets out of the way."</blockquote><figcaption class="small opacity-75">Maya R., Design Lead</figcaption></figure>
          <button type="button" class="btn btn-light btn-lg rounded-pill px-5 fw-semibold" data-auth-go="login">Log 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.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More Form snippets