Web Designer Wall

Snippets Form

Bootstrap 5 Login and Register Form with Tabs

A login and registration card with pill-style tabs that switch between the two forms, floating labels and inline validation.

Bootstrap 5 No jQuery Nov 2020 4.9K views 

<section class="wdw-stage">
  <div class="container" style="max-width:460px">
    <div class="wdw-card p-4 p-sm-5">
      <div class="text-center mb-4">
        <span class="wdw-icon mb-3"><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="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span>
        <h1 class="h3 wdw-heading mb-1" id="authTitle">Welcome back</h1>
        <p class="wdw-muted mb-0" id="authSub">Log in to pick up where you left off.</p>
      </div>
      <ul class="nav nav-pills nav-fill auth-tabs rounded-pill p-1 mb-4" id="authTabs" role="tablist">
        <li class="nav-item" role="presentation"><button class="nav-link active rounded-pill" id="tab-login" data-bs-toggle="pill" data-bs-target="#pane-login" type="button" role="tab" aria-controls="pane-login" aria-selected="true">Log 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">Register</button></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane fade show active" id="pane-login" role="tabpanel" aria-labelledby="tab-login" tabindex="0">
          <form class="auth-form" novalidate>
            <div class="form-floating mb-3"><input type="email" class="form-control" id="lgEmail" placeholder="Email" autocomplete="email" required><label for="lgEmail">Email address</label><div class="invalid-feedback">Enter a valid email.</div></div>
            <div class="form-floating mb-3"><input type="password" class="form-control" id="lgPass" placeholder="Password" autocomplete="current-password" required minlength="6"><label for="lgPass">Password</label><div class="invalid-feedback">Enter your password (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="lgRem"><label class="form-check-label" for="lgRem">Remember me</label></div>
              <a href="#" class="small fw-semibold">Forgot password?</a>
            </div>
            <button class="btn btn-primary rounded-pill w-100" type="submit">Log in</button>
          </form>
        </div>
        <div class="tab-pane fade" id="pane-register" role="tabpanel" aria-labelledby="tab-register" tabindex="0">
          <form class="auth-form" novalidate>
            <div class="form-floating mb-3"><input type="text" class="form-control" id="rgName" placeholder="Name" autocomplete="name" required><label for="rgName">Full name</label><div class="invalid-feedback">Please enter your name.</div></div>
            <div class="form-floating mb-3"><input type="email" class="form-control" id="rgEmail" placeholder="Email" autocomplete="email" required><label for="rgEmail">Email address</label><div class="invalid-feedback">Enter a valid email.</div></div>
            <div class="form-floating mb-4"><input type="password" class="form-control" id="rgPass" placeholder="Password" autocomplete="new-password" required minlength="8"><label for="rgPass">Password</label><div class="invalid-feedback">Use at least 8 characters.</div></div>
            <button class="btn btn-primary rounded-pill w-100" type="submit">Create account</button>
          </form>
        </div>
      </div>
      <div class="alert alert-success d-none mt-3 mb-0" id="authOk" role="status">Success! You're all set.</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