Web Designer Wall

Snippets Form

Bootstrap 5 Login, Register and Forgot Password Form

A combined authentication card with log in, register and forgot-password panels, a student or teacher selector, and a show-password toggle.

Bootstrap 5 No jQuery Nov 2020 2.2K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 980px">
    <div class="wdw-card overflow-hidden au-shell">
      <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 position-relative">
            <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 2 3 7l9 5 9-5-9-5Z"/><path d="m3 12 9 5 9-5"/><path d="m3 17 9 5 9-5"/></svg>
            Bootstrap
          </div>
          <div class="position-relative">
            <h2 class="fw-bold display-6 mb-3" style="letter-spacing:-.02em">Learn more, together.</h2>
            <p class="opacity-75 mb-0">One account for students and teachers. Join classes, share notes and track progress in one place.</p>
          </div>
        </div>
        <div class="col-lg-7">
          <div class="p-4 p-md-5">
            <ul class="nav nav-pills au-tabs rounded-pill p-1 mb-4" id="auTabs" role="tablist">
              <li class="nav-item flex-fill" role="presentation"><button class="nav-link rounded-pill w-100 active" id="au-login-tab" data-bs-toggle="pill" data-bs-target="#au-login" type="button" role="tab" aria-controls="au-login" aria-selected="true">Log in</button></li>
              <li class="nav-item flex-fill" role="presentation"><button class="nav-link rounded-pill w-100" id="au-reg-tab" data-bs-toggle="pill" data-bs-target="#au-reg" type="button" role="tab" aria-controls="au-reg" aria-selected="false">Register</button></li>
            </ul>

            <div class="tab-content">
              <div class="tab-pane fade show active" id="au-login" role="tabpanel" aria-labelledby="au-login-tab" tabindex="0">
                <h3 class="wdw-heading h4 mb-1">Welcome back</h3>
                <p class="wdw-muted mb-4">Log in to continue to your dashboard.</p>
                <form class="au-form" novalidate>
                  <div class="form-floating mb-3">
                    <input type="email" class="form-control" id="auEmail" placeholder="Email" autocomplete="email" required>
                    <label for="auEmail">Email address</label>
                  </div>
                  <div class="input-group mb-3">
                    <div class="form-floating flex-grow-1">
                      <input type="password" class="form-control" id="auPass" placeholder="Password" autocomplete="current-password" required>
                      <label for="auPass">Password</label>
                    </div>
                    <button class="btn btn-outline-secondary au-eye" type="button" aria-label="Show password" aria-pressed="false" data-pw="auPass">
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg>
                    </button>
                  </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="auRemember">
                      <label class="form-check-label" for="auRemember">Remember me</label>
                    </div>
                    <button type="button" class="btn btn-link p-0 text-decoration-none fw-semibold au-to-forgot" style="min-height:0">Forgot password?</button>
                  </div>
                  <button type="submit" class="btn btn-primary rounded-pill w-100">Log in</button>
                </form>
              </div>

              <div class="tab-pane fade" id="au-reg" role="tabpanel" aria-labelledby="au-reg-tab" tabindex="0">
                <h3 class="wdw-heading h4 mb-1">Create your account</h3>
                <p class="wdw-muted mb-4">It takes less than a minute.</p>
                <form class="au-form" novalidate>
                  <div class="btn-group w-100 mb-3" role="group" aria-label="I am a">
                    <input type="radio" class="btn-check" name="auRole" id="auStudent" autocomplete="off" checked>
                    <label class="btn btn-outline-primary rounded-start-pill" for="auStudent">Student</label>
                    <input type="radio" class="btn-check" name="auRole" id="auTeacher" autocomplete="off">
                    <label class="btn btn-outline-primary rounded-end-pill" for="auTeacher">Teacher</label>
                  </div>
                  <div class="row g-3 mb-3">
                    <div class="col-sm-6"><div class="form-floating"><input type="text" class="form-control" id="auFirst" placeholder="First name" autocomplete="given-name" required><label for="auFirst">First name</label></div></div>
                    <div class="col-sm-6"><div class="form-floating"><input type="text" class="form-control" id="auLast" placeholder="Last name" autocomplete="family-name" required><label for="auLast">Last name</label></div></div>
                  </div>
                  <div class="form-floating mb-3"><input type="email" class="form-control" id="auRegEmail" placeholder="Email" autocomplete="email" required><label for="auRegEmail">Email address</label></div>
                  <div class="row g-3 mb-4">
                    <div class="col-sm-6"><div class="form-floating"><input type="password" class="form-control" id="auRegPass" placeholder="Password" autocomplete="new-password" minlength="8" required><label for="auRegPass">Password</label></div></div>
                    <div class="col-sm-6"><div class="form-floating"><input type="password" class="form-control" id="auRegPass2" placeholder="Confirm" autocomplete="new-password" required><label for="auRegPass2">Confirm password</label></div></div>
                  </div>
                  <button type="submit" class="btn btn-primary rounded-pill w-100">Create account</button>
                </form>
              </div>

              <div class="tab-pane fade" id="au-forgot" role="tabpanel" aria-label="Reset password" tabindex="0">
                <h3 class="wdw-heading h4 mb-1">Reset your password</h3>
                <p class="wdw-muted mb-4">Enter your email and we will send you a reset link.</p>
                <form class="au-form" novalidate>
                  <div class="form-floating mb-4"><input type="email" class="form-control" id="auForgotEmail" placeholder="Email" autocomplete="email" required><label for="auForgotEmail">Email address</label></div>
                  <button type="submit" class="btn btn-primary rounded-pill w-100 mb-3">Send reset link</button>
                  <button type="button" class="btn btn-link w-100 text-decoration-none fw-semibold au-to-login">Back to log in</button>
                </form>
              </div>
            </div>
            <p class="small text-center mt-3 mb-0 au-msg" role="status" aria-live="polite"></p>
          </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.

Related snippets

More Form snippets