Web Designer Wall

Snippets Form

Bootstrap 5 Tabbed Login and Register Form

A login and sign-up card with a pill tab switcher, floating labels and a show/hide password toggle.

Bootstrap 5 No jQuery Sep 2020 3.5K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 440px;">
    <div class="wdw-card p-4 p-sm-5">
      <div class="text-center mb-4">
        <span class="wdw-icon mb-3" aria-hidden="true">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="11" width="16" height="9" rx="2.5"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>
        </span>
        <h1 class="wdw-heading h3 mb-1" id="auth-title">Welcome back</h1>
        <p class="wdw-muted small mb-0" id="auth-sub">Log in to pick up where you left off.</p>
      </div>

      <ul class="nav nav-pills nav-fill p-1 rounded-pill bg-body-tertiary mb-4" id="auth-tabs" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link rounded-pill active" id="login-tab" data-bs-toggle="pill" data-bs-target="#login-pane" type="button" role="tab" aria-controls="login-pane" aria-selected="true" data-title="Welcome back" data-sub="Log in to pick up where you left off.">Log in</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link rounded-pill" id="signup-tab" data-bs-toggle="pill" data-bs-target="#signup-pane" type="button" role="tab" aria-controls="signup-pane" aria-selected="false" data-title="Create your account" data-sub="Free for 14 days. No credit card needed.">Sign up</button>
        </li>
      </ul>

      <div class="tab-content">
        <div class="tab-pane fade show active" id="login-pane" role="tabpanel" aria-labelledby="login-tab" tabindex="0">
          <form class="d-grid gap-3" novalidate>
            <div class="form-floating">
              <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 position-relative">
              <input type="password" class="form-control pe-5" id="login-pass" placeholder="Password" autocomplete="current-password" required>
              <label for="login-pass">Password</label>
              <button type="button" class="btn btn-link position-absolute top-50 end-0 translate-middle-y me-1 px-3 text-body-secondary" data-toggle-pass="#login-pass" aria-label="Show password" style="min-height:44px;"><span class="small fw-semibold">Show</span></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="remember">
                <label class="form-check-label small" for="remember">Remember me</label>
              </div>
              <a href="#" class="small fw-semibold text-decoration-none">Forgot password?</a>
            </div>
            <button type="submit" class="btn btn-primary rounded-pill w-100">Log in</button>
          </form>
        </div>

        <div class="tab-pane fade" id="signup-pane" role="tabpanel" aria-labelledby="signup-tab" tabindex="0">
          <form class="d-grid gap-3" novalidate>
            <div class="form-floating">
              <input type="text" class="form-control" id="su-name" placeholder="Full name" autocomplete="name" required>
              <label for="su-name">Full name</label>
            </div>
            <div class="form-floating">
              <input type="email" class="form-control" id="su-email" placeholder="[email protected]" autocomplete="email" required>
              <label for="su-email">Email address</label>
            </div>
            <div class="form-floating position-relative">
              <input type="password" class="form-control pe-5" id="su-pass" placeholder="Password" autocomplete="new-password" minlength="8" required>
              <label for="su-pass">Password (8+ characters)</label>
              <button type="button" class="btn btn-link position-absolute top-50 end-0 translate-middle-y me-1 px-3 text-body-secondary" data-toggle-pass="#su-pass" aria-label="Show password" style="min-height:44px;"><span class="small fw-semibold">Show</span></button>
            </div>
            <button type="submit" class="btn btn-primary rounded-pill w-100">Create account</button>
            <p class="wdw-muted small text-center mb-0">By signing up you agree to our <a href="#" class="fw-semibold text-decoration-none">Terms</a>.</p>
          </form>
        </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.

Related snippets

More Form snippets