Web Designer Wall

Snippets Form

Bootstrap 5 Login Form Layout with Social Sign-in

A split sign-in layout with a brand panel, social sign-in buttons, floating-label email and password fields, and inline validation.

Bootstrap 5 No jQuery Oct 2020 2.3K 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 wdw-aurora d-flex flex-column justify-content-between p-4 p-lg-5">
          <span class="d-inline-flex align-items-center gap-2 fw-bold">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3 3 8l9 5 9-5-9-5zM3 13l9 5 9-5"/></svg>
            Commons
          </span>
          <div class="py-4 py-lg-5">
            <h1 class="wdw-heading text-white display-6 mb-3">Welcome back to our place.</h1>
            <p class="mb-0 opacity-75">A place to share knowledge and better understand the world around us.</p>
          </div>
          <p class="small opacity-50 mb-0 d-none d-lg-block">Trusted by 40,000+ curious people.</p>
        </div>
        <div class="col-lg-7 p-4 p-md-5">
          <h2 class="h4 wdw-heading mb-1">Sign in</h2>
          <p class="wdw-muted mb-4">New here? <a href="#" class="fw-semibold">Create an account</a></p>
          <div class="row g-2 mb-3">
            <div class="col-sm-6"><button type="button" class="btn btn-outline-secondary rounded-pill w-100">
              <svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><path fill="#4285F4" d="M22 12.2c0-.7-.1-1.4-.2-2H12v3.9h5.6a4.8 4.8 0 0 1-2.1 3.1v2.6h3.4c2-1.8 3.1-4.5 3.1-7.6z"/><path fill="#34A853" d="M12 22c2.8 0 5.1-.9 6.9-2.5l-3.4-2.6c-.9.6-2.1 1-3.5 1-2.7 0-5-1.8-5.8-4.3H2.7v2.7A10 10 0 0 0 12 22z"/><path fill="#FBBC05" d="M6.2 13.6a6 6 0 0 1 0-3.9V7H2.7a10 10 0 0 0 0 9.1l3.5-2.5z"/><path fill="#EA4335" d="M12 5.9c1.5 0 2.9.5 4 1.6l3-3A10 10 0 0 0 2.7 7l3.5 2.7C7 7.7 9.3 5.9 12 5.9z"/></svg>Google</button></div>
            <div class="col-sm-6"><button type="button" class="btn btn-outline-secondary rounded-pill w-100">
              <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.410c.580.11.790-.250.79-.560v-2c-3.2.70-3.88-1.35-3.88-1.35-.520-1.33-1.28-1.69-1.28-1.69-1.04-.710.08-.700.08-.700 1.15.080 1.76 1.18 1.76 1.18 1.03 1.76 2.7 1.25 3.36.960.1-.750.4-1.25.730-1.54-2.56-.290-5.24-1.28-5.24-5.69 0-1.26.450-2.29 1.18-3.1-.120-.290-.510-1.47.110-3.06 0 0 .970-.310 3.17 1.180a11 11 0 0 1 5.78 0c2.2-1.49 3.17-1.18 3.17-1.18.620 1.59.230 2.77.110 3.06.740.81 1.18 1.84 1.18 3.1 0 4.42-2.69 5.39-5.26 5.67.410.36.780 1.06.780 2.140v3.170c0 .310.21.680.8.560A11.5 11.5 0 0 0 12 .5z"/></svg>GitHub</button></div>
          </div>
          <div class="d-flex align-items-center gap-3 my-3 wdw-muted small"><hr class="flex-grow-1 m-0"><span>or continue with email</span><hr class="flex-grow-1 m-0"></div>
          <form id="loginForm" novalidate>
            <div class="form-floating mb-3">
              <input type="email" class="form-control" id="loginEmail" placeholder="[email protected]" autocomplete="email" required>
              <label for="loginEmail">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="loginPassword" placeholder="Password" autocomplete="current-password" required minlength="6">
              <label for="loginPassword">Password</label>
              <div class="invalid-feedback">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"><input class="form-check-input" type="checkbox" id="loginRemember"><label class="form-check-label" for="loginRemember">Remember me</label></div>
              <a href="#" class="small fw-semibold">Forgot password?</a>
            </div>
            <button type="submit" class="btn btn-primary rounded-pill w-100">Sign in</button>
          </form>
          <p class="small wdw-muted mt-4 mb-0">By signing in you agree to our <a href="#">Terms</a> and <a href="#">Privacy Policy</a>.</p>
        </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