Web Designer Wall

Snippets Form

Bootstrap 5 Login and Sign Up Form with Tabs

A login card with a pill tab switcher that toggles between a log-in form and a sign-up form, with floating labels, validation and a brand panel beside it.

Bootstrap 5 No jQuery Oct 2020 3.9K views 

<section class="wdw-stage">
  <div class="container" style="max-width:960px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <div class="col-lg-5 d-none d-lg-flex wdw-aurora lt-side p-5 flex-column justify-content-between">
          <span class="d-inline-flex align-items-center gap-2 fw-bold fs-5">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2 3 7v10l9 5 9-5V7z"/><path d="M12 22V12M3 7l9 5 9-5"/></svg>
            Orbit
          </span>
          <div>
            <p class="display-6 fw-bold mb-3" style="letter-spacing:-.02em">Everything your team ships, in one place.</p>
            <p class="opacity-75 mb-0">Join 20,000+ teams planning, building and launching with Orbit.</p>
          </div>
        </div>
        <div class="col-lg-7 p-4 p-md-5">
          <ul class="nav nav-pills lt-tabs mb-4" id="ltTabs" role="tablist">
            <li class="nav-item flex-fill" role="presentation">
              <button class="nav-link active rounded-pill w-100" id="lt-in-tab" data-bs-toggle="pill" data-bs-target="#lt-in" type="button" role="tab" aria-controls="lt-in" aria-selected="true">Log in</button>
            </li>
            <li class="nav-item flex-fill" role="presentation">
              <button class="nav-link rounded-pill w-100" id="lt-up-tab" data-bs-toggle="pill" data-bs-target="#lt-up" type="button" role="tab" aria-controls="lt-up" aria-selected="false">Sign up</button>
            </li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane fade show active" id="lt-in" role="tabpanel" aria-labelledby="lt-in-tab" tabindex="0">
              <h2 class="wdw-heading h3 mb-1">Welcome back</h2>
              <p class="wdw-muted mb-4">Log in to continue to your workspace.</p>
              <form class="lt-form" novalidate>
                <div class="form-floating mb-3">
                  <input type="email" class="form-control" id="lt-in-email" placeholder="[email protected]" autocomplete="email" required>
                  <label for="lt-in-email">Email address</label>
                  <div class="invalid-feedback">Enter a valid email address.</div>
                </div>
                <div class="form-floating mb-3">
                  <input type="password" class="form-control" id="lt-in-pass" placeholder="Password" autocomplete="current-password" required minlength="6">
                  <label for="lt-in-pass">Password</label>
                  <div class="invalid-feedback">Use at least 6 characters.</div>
                </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="lt-remember">
                    <label class="form-check-label" for="lt-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="lt-up" role="tabpanel" aria-labelledby="lt-up-tab" tabindex="0">
              <h2 class="wdw-heading h3 mb-1">Create your account</h2>
              <p class="wdw-muted mb-4">Free for 14 days. No credit card needed.</p>
              <form class="lt-form" novalidate>
                <div class="form-floating mb-3">
                  <input type="text" class="form-control" id="lt-up-name" placeholder="Full name" autocomplete="name" required>
                  <label for="lt-up-name">Full name</label>
                  <div class="invalid-feedback">Tell us your name.</div>
                </div>
                <div class="form-floating mb-3">
                  <input type="email" class="form-control" id="lt-up-email" placeholder="[email protected]" autocomplete="email" required>
                  <label for="lt-up-email">Email address</label>
                  <div class="invalid-feedback">Enter a valid email address.</div>
                </div>
                <div class="form-floating mb-3">
                  <input type="password" class="form-control" id="lt-up-pass" placeholder="Password" autocomplete="new-password" required minlength="6">
                  <label for="lt-up-pass">Password</label>
                  <div class="invalid-feedback">Use at least 6 characters.</div>
                </div>
                <div class="form-check mb-4">
                  <input class="form-check-input" type="checkbox" id="lt-terms" required>
                  <label class="form-check-label small" for="lt-terms">I agree to the <a href="#" class="fw-semibold text-decoration-none">Terms</a> and <a href="#" class="fw-semibold text-decoration-none">Privacy Policy</a></label>
                </div>
                <button type="submit" class="btn btn-primary rounded-pill w-100">Create account</button>
              </form>
            </div>
          </div>
          <div class="alert alert-success d-none mt-3 mb-0 py-2" id="lt-ok" role="status">Success. Redirecting...</div>
        </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