Web Designer Wall

Snippets Form

Bootstrap 5 Sign In / Sign Up Form with Slide Effect

A sign-in and sign-up card where a photo overlay slides across to reveal the other form, collapsing to a simple text switch on phones.

Bootstrap 5 Bootstrap 6 No jQuery Dec 2020 8.8K views 

<section class="wdw-stage">
  <div class="container" style="max-width:960px">
    <div class="wdw-auth wdw-card overflow-hidden" id="auth" data-mode="signin">
      <div class="wdw-auth-panel wdw-auth-signin p-4 p-sm-5" id="panel-signin">
        <h1 class="wdw-heading h2 mb-1">Welcome back</h1>
        <p class="wdw-muted mb-4">Sign in to pick up where you left off.</p>
        <div class="row g-2 mb-3">
          <div class="col-6"><button type="button" class="btn btn-outline-secondary text-body rounded-pill w-100">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 7.5A8 8 0 1 0 20 12h-8"/></svg>
            Google</button></div>
          <div class="col-6"><button type="button" class="btn btn-outline-secondary text-body rounded-pill w-100">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2a10 10 0 0 0-3.2 19.5c.5.1.7-.2.7-.5v-1.8c-2.8.6-3.4-1.2-3.4-1.2-.5-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.5 2.4 1.1 3 .8.1-.7.4-1.1.6-1.4-2.2-.3-4.6-1.1-4.6-5 0-1.1.4-2 1-2.7-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.8 1a9.6 9.600 0 0 1 5 0c1.9-1.300 2.8-1 2.8-1 .5 1.400.2 2.4.1 2.7.6.7 1 1.600 1 2.7 0 3.900-2.400 4.7-4.6 5 .4.3.7.9.7 1.9v2.8c0 .3.2.6.7.5A10 10 0 0 0 12 2z"/></svg>
            GitHub</button></div>
        </div>
        <div class="wdw-or small wdw-muted mb-3"><span>or use email</span></div>
        <form class="d-grid gap-3" onsubmit="return false">
          <div class="form-floating"><input type="email" class="form-control" id="si-email" placeholder="Email" autocomplete="email"><label for="si-email">Email</label></div>
          <div class="input-group">
            <div class="form-floating flex-grow-1"><input type="password" class="form-control" id="si-pass" placeholder="Password" autocomplete="current-password"><label for="si-pass">Password</label></div>
            <button type="button" class="btn btn-outline-secondary wdw-eye" data-toggle-pass="si-pass" aria-label="Show password" aria-pressed="false">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>
            </button>
          </div>
          <div class="d-flex justify-content-between align-items-center">
            <div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="si-remember"><label class="form-check-label small" for="si-remember">Remember me</label></div>
            <a href="#" class="small link-underline link-underline-opacity-0 link-underline-opacity-100-hover">Forgot your password?</a>
          </div>
          <button type="submit" class="btn btn-primary rounded-pill">Sign in</button>
        </form>
        <p class="small wdw-muted text-center mt-3 mb-0 d-md-none">New here? <button type="button" class="btn btn-link p-0 align-baseline small wdw-switch-link" data-switch="signup">Create an account</button></p>
      </div>
      <div class="wdw-auth-panel wdw-auth-signup p-4 p-sm-5" id="panel-signup">
        <h2 class="wdw-heading h2 mb-1">Create account</h2>
        <p class="wdw-muted mb-4">It takes less than a minute.</p>
        <form class="d-grid gap-3" onsubmit="return false">
          <div class="form-floating"><input type="text" class="form-control" id="su-name" placeholder="Name" autocomplete="name"><label for="su-name">Full name</label></div>
          <div class="form-floating"><input type="email" class="form-control" id="su-email" placeholder="Email" autocomplete="email"><label for="su-email">Email</label></div>
          <div class="input-group">
            <div class="form-floating flex-grow-1"><input type="password" class="form-control" id="su-pass" placeholder="Password" autocomplete="new-password"><label for="su-pass">Password</label></div>
            <button type="button" class="btn btn-outline-secondary wdw-eye" data-toggle-pass="su-pass" aria-label="Show password" aria-pressed="false">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>
            </button>
          </div>
          <div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="su-terms"><label class="form-check-label small" for="su-terms">I agree to the <a href="#" class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover">Terms</a> and <a href="#" class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover">Privacy Policy</a></label></div>
          <button type="submit" class="btn btn-primary rounded-pill">Sign up</button>
        </form>
        <p class="small wdw-muted text-center mt-3 mb-0 d-md-none">Already a member? <button type="button" class="btn btn-link p-0 align-baseline small wdw-switch-link" data-switch="signin">Sign in</button></p>
      </div>
      <div class="wdw-auth-overlay wdw-aurora d-none d-md-block">
        <div class="wdw-auth-copy" id="copy-signin">
          <span class="wdw-brand-mark mb-3" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 5-9 5-9-5 9-5z"/><path d="M3 13l9 5 9-5"/></svg></span>
          <h2 class="fw-bold mb-2">New here?</h2>
          <p class="mb-3 opacity-75">Enter your details and start the journey with us.</p>
          <ul class="wdw-bullets list-unstyled text-start mb-4">
            <li>Save your favourite places</li><li>Sync across every device</li><li>Free for your first 30 days</li>
          </ul>
          <button type="button" class="btn btn-outline-light rounded-pill px-4" data-switch="signup">Sign up</button>
        </div>
        <div class="wdw-auth-copy" id="copy-signup">
          <span class="wdw-brand-mark mb-3" aria-hidden="true"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 5-9 5-9-5 9-5z"/><path d="M3 13l9 5 9-5"/></svg></span>
          <h2 class="fw-bold mb-2">Hello, friend!</h2>
          <p class="mb-3 opacity-75">Already have an account? Sign in to stay connected.</p>
          <ul class="wdw-bullets list-unstyled text-start mb-4">
            <li>Pick up where you left off</li><li>Your saved places are waiting</li><li>Secure, one-tap sign in</li>
          </ul>
          <button type="button" class="btn btn-outline-light rounded-pill px-4" data-switch="signin">Sign in</button>
        </div>
      </div>
      <p class="visually-hidden" id="auth-live" role="status" aria-live="polite"></p>
    </div>
  </div>
</section>

Built on Bootstrap 6.0.0-alpha.1 (ES modules, no jQuery). Load Bootstrap through an import map and run the JavaScript as type="module" — the downloaded file is already set up that way. Alpha releases can still change class names.

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