Web Designer Wall

Snippets Form

Bootstrap 5 Login Form in Modal

A sign-in modal with floating-label email and password fields, a show/hide password toggle, remember-me and inline validation.

Bootstrap 5 No jQuery Jun 2019 2.9K views 

<section class="wdw-stage">
  <div class="container text-center" style="max-width:640px">
    <span class="wdw-eyebrow">Account</span>
    <h2 class="wdw-heading display-6 mt-1 mb-3">Welcome back</h2>
    <button type="button" class="btn btn-primary btn-lg rounded-pill px-5" data-bs-toggle="modal" data-bs-target="#loginModal" data-wdw-autoopen>Log in</button>
  </div>

  <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content lg-modal border-0 overflow-hidden">
        <div class="row g-0">
          <div class="col-md-5 wdw-aurora p-4 p-lg-5 d-flex flex-column justify-content-center">
            <span class="wdw-eyebrow text-white opacity-75">Register now for free</span>
            <h3 class="wdw-heading h3 mt-1 mb-4 text-white">Join and shop smarter</h3>
            <ul class="list-unstyled d-flex flex-column gap-3 mb-4"><li class="d-flex gap-3 align-items-start"><span class="wdw-icon lg-ben" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg></span><div><div class="fw-semibold">See your orders</div><div class="small opacity-75">Track every purchase and delivery in one place.</div></div></li><li class="d-flex gap-3 align-items-start"><span class="wdw-icon lg-ben" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z"/></svg></span><div><div class="fw-semibold">Save favourites</div><div class="small opacity-75">Build a wishlist and come back to it any time.</div></div></li><li class="d-flex gap-3 align-items-start"><span class="wdw-icon lg-ben" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9z"/></svg></span><div><div class="fw-semibold">Fast checkout</div><div class="small opacity-75">Saved details mean you pay in a couple of clicks.</div></div></li><li class="d-flex gap-3 align-items-start"><span class="wdw-icon lg-ben" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></span><div><div class="fw-semibold">Member offers</div><div class="small opacity-75">Early access to sales and members-only prices.</div></div></li></ul>
            <button type="button" class="btn btn-light rounded-pill align-self-start px-4">Create account</button>
          </div>
          <div class="col-md-7 position-relative">
            <button type="button" class="btn-close position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" aria-label="Close"></button>
            <div class="p-4 p-lg-5">
              <h3 class="modal-title h4 wdw-heading mb-1" id="loginTitle">Log in to your account</h3>
              <p class="wdw-muted mb-4">Welcome back. Enter your details below.</p>
              <form id="loginForm" novalidate>
                <div class="form-floating mb-3">
                  <input type="email" class="form-control" id="lgEmail" placeholder="Email" autocomplete="email" aria-describedby="lgEmailErr" required>
                  <label for="lgEmail">Email address</label>
                  <div class="invalid-feedback" id="lgEmailErr">Enter a valid email address.</div>
                </div>
                <div class="form-floating mb-3 position-relative">
                  <input type="password" class="form-control pe-5" id="lgPass" placeholder="Password" autocomplete="current-password" minlength="6" aria-describedby="lgPassErr" required>
                  <label for="lgPass">Password</label>
                  <button type="button" class="btn btn-sm btn-link position-absolute top-0 end-0 mt-2 me-2 p-0 lg-eye" id="lgToggle" aria-controls="lgPass" aria-pressed="false" aria-label="Show password">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg>
                  </button>
                  <div class="invalid-feedback" id="lgPassErr">Password must be 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="lgRemember">
                    <label class="form-check-label" for="lgRemember">Remember me</label>
                  </div>
                  <a href="#" class="small link-primary text-decoration-none fw-semibold">Forgot password?</a>
                </div>
                <button type="submit" class="btn btn-primary rounded-pill w-100">Log in</button>
              </form>
            </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