Web Designer Wall

Snippets Form

Bootstrap 5 Sign Up & Login Form (Split Layout)

A split-panel sign-up and log-in card with a segmented switch, password reveal and social sign-in options, alongside a brand panel that hides on small screens.

Bootstrap 5 No jQuery Nov 2020 6.8K views 

<section class="wdw-stage">
  <div class="container" style="max-width:980px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <div class="col-lg-5 d-none d-lg-flex wdw-aurora auth-brand 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="M3 17c3-6 6-6 9 0s6 6 9 0"/><path d="M3 11c3-6 6-6 9 0s6 6 9 0" opacity=".55"/></svg>
            Tidewater
          </div>
          <div>
            <p class="fw-bold display-6 mb-3" style="letter-spacing:-.02em">Start something calm and well made.</p>
            <p class="mb-0 opacity-75">Create an account to save your projects, sync across devices and pick up exactly where you left off.</p>
          </div>
          <p class="small mb-0 opacity-75">Free for personal use. No card required.</p>
        </div>
        <div class="col-lg-7 p-4 p-sm-5">
          <div class="mx-auto" style="max-width:380px">
            <ul class="nav nav-pills auth-seg rounded-pill p-1 mb-4" role="tablist" aria-label="Account">
              <li class="nav-item flex-fill" role="presentation"><button class="nav-link rounded-pill w-100 active" id="tab-signup" data-bs-toggle="pill" data-bs-target="#pane-signup" type="button" role="tab" aria-controls="pane-signup" aria-selected="true">Sign up</button></li>
              <li class="nav-item flex-fill" role="presentation"><button class="nav-link rounded-pill w-100" id="tab-login" data-bs-toggle="pill" data-bs-target="#pane-login" type="button" role="tab" aria-controls="pane-login" aria-selected="false">Log in</button></li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane fade show active" id="pane-signup" role="tabpanel" aria-labelledby="tab-signup" tabindex="0">
                <h2 class="wdw-heading h3 mb-1">Create your account</h2>
                <p class="wdw-muted mb-4">It takes less than a minute.</p>
                <form class="d-grid gap-3" onsubmit="return false">
                  <div class="row g-3">
                    <div class="col-6"><label class="form-label small fw-semibold" for="su-first">First name</label><input class="form-control" id="su-first" autocomplete="given-name" placeholder="Ada"></div>
                    <div class="col-6"><label class="form-label small fw-semibold" for="su-last">Last name</label><input class="form-control" id="su-last" autocomplete="family-name" placeholder="Lovelace"></div>
                  </div>
                  <div><label class="form-label small fw-semibold" for="su-email">Email</label><input type="email" class="form-control" id="su-email" autocomplete="email" placeholder="[email protected]"></div>
                  <div><label class="form-label small fw-semibold" for="su-pass">Password</label>
                    <div class="input-group"><input type="password" class="form-control" id="su-pass" autocomplete="new-password" placeholder="At least 8 characters"><button class="btn btn-outline-secondary" type="button" data-toggle-pass="#su-pass" aria-controls="su-pass">Show</button></div></div>
                  <button class="btn btn-primary rounded-pill w-100 mt-1" type="submit">Create account</button>
                </form>
              </div>
              <div class="tab-pane fade" id="pane-login" role="tabpanel" aria-labelledby="tab-login" tabindex="0">
                <h2 class="wdw-heading h3 mb-1">Welcome back</h2>
                <p class="wdw-muted mb-4">Log in to continue your work.</p>
                <form class="d-grid gap-3" onsubmit="return false">
                  <div><label class="form-label small fw-semibold" for="li-email">Email</label><input type="email" class="form-control" id="li-email" autocomplete="email" placeholder="[email protected]"></div>
                  <div><div class="d-flex justify-content-between"><label class="form-label small fw-semibold" for="li-pass">Password</label><a href="#" class="small fw-semibold text-decoration-none">Forgot?</a></div>
                    <div class="input-group"><input type="password" class="form-control" id="li-pass" autocomplete="current-password" placeholder="Your password"><button class="btn btn-outline-secondary" type="button" data-toggle-pass="#li-pass" aria-controls="li-pass">Show</button></div></div>
                  <button class="btn btn-primary rounded-pill w-100 mt-1" type="submit">Log in</button>
                </form>
              </div>
            </div>
            <div class="d-flex align-items-center gap-3 my-4 wdw-muted 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 auth-oauth rounded-pill w-100 d-inline-flex align-items-center justify-content-center gap-2"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21.35 11.1H12v2.9h5.35c-.5 2.4-2.6 3.9-5.35 3.9a6 6 0 1 1 0-12c1.5 0 2.8.55 3.85 1.45l2.1-2.1A9 9 0 1 0 12 21c5.2 0 8.6-3.65 8.6-8.8 0-.4-.05-.8-.1-1.1z"/></svg> Google</button></div>
              <div class="col-6"><button type="button" class="btn btn-outline-secondary auth-oauth rounded-pill w-100 d-inline-flex align-items-center justify-content-center gap-2"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5a11.5 11.5 0 0 0-3.64 22.41c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.52-1.33-1.28-1.69-1.28-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.19 1.76 1.19 1.03 1.76 2.69 1.25 3.35.96.1-.75.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.78 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.69 5.39-5.25 5.68.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .5z"/></svg> GitHub</button></div>
            </div>
          </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