Web Designer Wall

Snippets Form

Bootstrap 5 Login and Registration Form with Slider

A login and registration card with a sliding brand panel that swaps between the two forms, floating-label inputs and social sign-in buttons. On phones it collapses to one form with a text switch link.

Bootstrap 5 Bootstrap 6 No jQuery Nov 2020 14.6K views 

<section class="wdw-stage">
  <div class="container" style="max-width:940px">
    <div class="wdw-card au" id="auth" data-mode="login">
      <div class="au-overlay wdw-aurora d-none d-md-flex" aria-hidden="false">
        <div class="au-copy au-copy-login">
          <h2 class="h2 fw-bold mb-2">Hello, friend!</h2>
          <p class="opacity-75 mb-4">Enter your details and start your journey with us.</p>
          <button type="button" class="btn btn-outline-light rounded-pill px-4" data-au="register">Sign up</button>
        </div>
        <div class="au-copy au-copy-register">
          <h2 class="h2 fw-bold mb-2">Welcome back!</h2>
          <p class="opacity-75 mb-4">Already have an account? Sign in to keep connected.</p>
          <button type="button" class="btn btn-outline-light rounded-pill px-4" data-au="login">Sign in</button>
        </div>
      </div>

      <div class="au-panel au-login p-4 p-md-5" id="au-login">
        <h1 class="h3 wdw-heading mb-1">Sign in</h1>
        <p class="wdw-muted small mb-4">Welcome back. Use a provider or your email.</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" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>GitHub</button>
          <button type="button" class="btn btn-outline-secondary rounded-pill flex-fill"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 12h5.5M17 12a5 5 0 1 1-1.5-3.6"/></svg>Google</button>
        </div>
        <div class="au-or text-center small wdw-muted mb-3"><span>or with email</span></div>
        <form class="d-grid gap-3" data-au-form novalidate>
          <div class="form-floating"><input type="email" class="form-control" id="au-l-email" placeholder="Email" autocomplete="email" required><label for="au-l-email">Email</label></div>
          <div class="form-floating"><input type="password" class="form-control" id="au-l-pass" placeholder="Password" autocomplete="current-password" required><label for="au-l-pass">Password</label></div>
          <div class="text-end"><a href="#" class="small fw-semibold text-decoration-none">Forgot password?</a></div>
          <button type="submit" class="btn btn-primary rounded-pill">Sign in</button>
          <div class="small text-success-emphasis text-center" role="status" data-au-msg></div>
        </form>
        <p class="d-md-none text-center small wdw-muted mt-4 mb-0">No account? <button type="button" class="btn btn-link p-0 align-baseline fw-semibold text-decoration-none" data-au="register">Sign up</button></p>
      </div>

      <div class="au-panel au-register p-4 p-md-5" id="au-register">
        <h1 class="h3 wdw-heading mb-1">Create account</h1>
        <p class="wdw-muted small 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" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>GitHub</button>
          <button type="button" class="btn btn-outline-secondary rounded-pill flex-fill"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 12h5.5M17 12a5 5 0 1 1-1.5-3.6"/></svg>Google</button>
        </div>
        <div class="au-or text-center small wdw-muted mb-3"><span>or with email</span></div>
        <form class="d-grid gap-3" data-au-form novalidate>
          <div class="form-floating"><input type="text" class="form-control" id="au-r-name" placeholder="Name" autocomplete="name" required><label for="au-r-name">Name</label></div>
          <div class="form-floating"><input type="email" class="form-control" id="au-r-email" placeholder="Email" autocomplete="email" required><label for="au-r-email">Email</label></div>
          <div class="form-floating"><input type="password" class="form-control" id="au-r-pass" placeholder="Password" autocomplete="new-password" required><label for="au-r-pass">Password</label></div>
          <button type="submit" class="btn btn-primary rounded-pill">Create account</button>
          <div class="small text-success-emphasis text-center" role="status" data-au-msg></div>
        </form>
        <p class="d-md-none text-center small wdw-muted mt-4 mb-0">Have an account? <button type="button" class="btn btn-link p-0 align-baseline fw-semibold text-decoration-none" data-au="login">Sign in</button></p>
      </div>
    </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.

Related snippets

More Form snippets