Web Designer Wall

Snippets Form

Bootstrap 5 Login and Register Form with Tabs

A split-screen authentication card with a brand panel, sign in and create account tabs, floating-label fields and social login buttons. Switch between forms without leaving the card.

Bootstrap 5 No jQuery Nov 2020 2.4K views 

<section class="wdw-stage">
  <div class="container w-100" style="max-width:920px">
    <div class="wdw-card overflow-hidden" id="auth">
      <div class="row g-0">
        <div class="col-lg-5 d-none d-lg-flex wdw-aurora p-5 flex-column justify-content-between">
          <div class="d-flex align-items-center gap-2 fw-bold fs-5">
            <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 3l9 5-9 5-9-5 9-5zM3 13l9 5 9-5"/></svg>
            Northwind
          </div>
          <div>
            <h2 class="fw-bold mb-3" style="letter-spacing:-.02em;line-height:1.15">Everything you need, in one place.</h2>
            <p class="mb-0 opacity-75">Sign in to pick up where you left off, or create a free account in under a minute.</p>
          </div>
        </div>
        <div class="col-lg-7 p-4 p-md-5">
          <ul class="nav nav-pills bg-body-tertiary rounded-pill p-1 mb-4 nav-fill" role="tablist">
            <li class="nav-item" role="presentation"><button class="nav-link rounded-pill active" id="tab-login" data-bs-toggle="pill" data-bs-target="#pane-login" type="button" role="tab" aria-controls="pane-login" aria-selected="true">Sign in</button></li>
            <li class="nav-item" role="presentation"><button class="nav-link rounded-pill" id="tab-register" data-bs-toggle="pill" data-bs-target="#pane-register" type="button" role="tab" aria-controls="pane-register" aria-selected="false">Create account</button></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane fade show active" id="pane-login" role="tabpanel" aria-labelledby="tab-login">
              <h1 class="wdw-heading h3 mb-1">Welcome back</h1>
              <p class="wdw-muted mb-4">Enter your details to access your account.</p>
              <form class="auth-form" novalidate>
                <div class="form-floating mb-3">
                  <input type="email" class="form-control" id="login-email" placeholder="[email protected]" autocomplete="email" required>
                  <label for="login-email">Email address</label>
                </div>
                <div class="form-floating mb-3">
                  <input type="password" class="form-control" id="login-pass" placeholder="Password" autocomplete="current-password" required>
                  <label for="login-pass">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="remember" checked><label class="form-check-label" for="remember">Remember me</label></div>
                  <a href="#" class="small fw-semibold text-decoration-none">Forgot password?</a>
                </div>
                <button class="btn btn-primary rounded-pill w-100" type="submit">Sign in</button>
              </form>
            </div>
            <div class="tab-pane fade" id="pane-register" role="tabpanel" aria-labelledby="tab-register">
              <h1 class="wdw-heading h3 mb-1">Create your account</h1>
              <p class="wdw-muted mb-4">Free to start. No credit card needed.</p>
              <form class="auth-form" novalidate>
                <div class="form-floating mb-3">
                  <input type="text" class="form-control" id="reg-name" placeholder="Full name" autocomplete="name" required>
                  <label for="reg-name">Full name</label>
                </div>
                <div class="form-floating mb-3">
                  <input type="email" class="form-control" id="reg-email" placeholder="[email protected]" autocomplete="email" required>
                  <label for="reg-email">Email address</label>
                </div>
                <div class="form-floating mb-4">
                  <input type="password" class="form-control" id="reg-pass" placeholder="Password" autocomplete="new-password" minlength="8" required>
                  <label for="reg-pass">Password (8+ characters)</label>
                </div>
                <button class="btn btn-primary rounded-pill w-100" type="submit">Create account</button>
              </form>
            </div>
          </div>
          <div class="d-flex align-items-center gap-3 my-4 text-body-secondary small"><hr class="flex-grow-1 m-0"><span>or continue with</span><hr class="flex-grow-1 m-0"></div>
          <div class="row g-2">
            <div class="col-6"><button type="button" class="btn btn-outline-secondary rounded-pill w-100"><span class="fw-bold fs-5 lh-1" aria-hidden="true">G</span> Google</button></div>
            <div class="col-6"><button type="button" class="btn btn-outline-secondary rounded-pill w-100"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.1.79-.25.79-.56v-2c-3.2.7-3.87-1.54-3.87-1.54-.52-1.33-1.28-1.69-1.28-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.03 1.76 2.69 1.25 3.35.96.1-.74.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 0 1 5.77 0c2.2-1.49 3.17-1.18 3.17-1.18.63 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 0 0 23.5 12C23.5 5.65 18.35.5 12 .5z"/></svg> GitHub</button></div>
          </div>
          <p class="small text-body-secondary mt-4 mb-0 text-center" id="auth-switch">Don't have an account? <a href="#" class="fw-semibold text-decoration-none" data-switch="register">Sign up</a></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