Web Designer Wall

Snippets Form

Bootstrap 5 Login Form with Sign Up Toggle

A split-screen sign-in and sign-up card with social buttons, floating-label fields and a brand panel that switches between the two forms.

Bootstrap 5 No jQuery Aug 2020 2K views 

<section class="wdw-stage">
  <div class="container" style="max-width:960px">
    <div class="wdw-card overflow-hidden auth-split" id="authSplit" data-mode="signin">
      <div class="row g-0">
        <div class="col-lg-6 order-lg-2 wdw-aurora p-4 p-md-5 d-flex flex-column justify-content-between auth-panel">
          <div class="d-flex align-items-center gap-2 fw-bold">
            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z"/><path d="M12 12l8-4.5M12 12v9M12 12L4 7.5"/></svg>
            Northwind
          </div>
          <div class="py-4">
            <h2 class="display-6 fw-bold mb-3" data-panel-title>New here?</h2>
            <p class="mb-4 opacity-75" data-panel-text>Create a free account and start building with your team in minutes.</p>
            <button type="button" class="btn btn-outline-light rounded-pill px-4" data-switch>Create account</button>
          </div>
          <p class="small opacity-75 mb-0">Trusted by 12,000+ product teams</p>
        </div>
        <div class="col-lg-6 order-lg-1 p-4 p-md-5">
          <form class="auth-form" data-form="signin" novalidate>
            <span class="wdw-eyebrow">Welcome back</span>
            <h1 class="wdw-heading h2 mb-4">Sign in</h1>
            <div class="d-flex gap-2 mb-3">
              <button type="button" class="btn btn-outline-secondary rounded-pill flex-fill" aria-label="Continue with Google">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21.35 11.1H12v2.9h5.35c-.5 2.4-2.5 3.5-5.35 3.5a6 6 0 110-12c1.5 0 2.8.5 3.8 1.4l2.1-2.1A9 9 0 1012 21c5.2 0 8.6-3.6 8.6-8.8 0-.4 0-.8-.1-1.1z"/></svg> Google
              </button>
              <button type="button" class="btn btn-outline-secondary rounded-pill flex-fill" aria-label="Continue with GitHub">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2a10 10 0 00-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.6 0 015 0c1.9-1.3 2.8-1 2.8-1 .5 1.4.2 2.4.1 2.7.6.7 1 1.6 1 2.7 0 3.9-2.4 4.7-4.6 5 .4.3.7.9.7 1.8v2.7c0 .3.2.6.7.5A10 10 0 0012 2z"/></svg> GitHub
              </button>
            </div>
            <div class="d-flex align-items-center gap-3 my-3 text-body-secondary small"><hr class="flex-grow-1 m-0"><span>or with email</span><hr class="flex-grow-1 m-0"></div>
            <div class="form-floating mb-3">
              <input type="email" class="form-control" id="siEmail" placeholder="[email protected]" required autocomplete="email">
              <label for="siEmail">Email address</label>
            </div>
            <div class="form-floating mb-3">
              <input type="password" class="form-control" id="siPass" placeholder="Password" required autocomplete="current-password">
              <label for="siPass">Password</label>
            </div>
            <div class="d-flex justify-content-between align-items-center mb-4">
              <div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="siRemember"><label class="form-check-label" for="siRemember">Remember me</label></div>
              <a href="#" class="link-primary link-underline-opacity-0 link-underline-opacity-100-hover small fw-semibold">Forgot password?</a>
            </div>
            <button type="submit" class="btn btn-primary rounded-pill w-100">Sign in</button>
          </form>

          <form class="auth-form" data-form="signup" novalidate hidden>
            <span class="wdw-eyebrow">Get started</span>
            <h1 class="wdw-heading h2 mb-4">Create account</h1>
            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="suName" placeholder="Full name" required autocomplete="name">
              <label for="suName">Full name</label>
            </div>
            <div class="form-floating mb-3">
              <input type="email" class="form-control" id="suEmail" placeholder="[email protected]" required autocomplete="email">
              <label for="suEmail">Email address</label>
            </div>
            <div class="form-floating mb-3">
              <input type="password" class="form-control" id="suPass" placeholder="Password" required minlength="8" autocomplete="new-password">
              <label for="suPass">Password (8+ characters)</label>
            </div>
            <div class="form-check mb-4"><input class="form-check-input" type="checkbox" id="suTerms" required><label class="form-check-label small" for="suTerms">I agree to the <a href="#" class="link-primary">Terms</a> and <a href="#" class="link-primary">Privacy Policy</a></label></div>
            <button type="submit" class="btn btn-primary rounded-pill w-100">Create account</button>
          </form>
          <p class="small text-body-secondary text-center mt-4 mb-0" data-status role="status" aria-live="polite"></p>
        </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