Web Designer Wall

Snippets Buttons

Bootstrap 5 Login Form with Social Buttons

A centred login card with social sign-in buttons, an or divider, floating-label email and password fields, remember me and a forgot password link.

Bootstrap 5 No jQuery Sep 2020 2.2K views 

<section class="wdw-stage">
  <div class="container" style="max-width:920px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <div class="col-lg-5 d-none d-lg-block">
          <div class="wdw-aurora h-100 p-5 d-flex flex-column justify-content-between lg-side">
            <span class="lg-brand"><svg width="26" height="26" 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 2 9 5v10l-9 5-9-5V7z"/><path d="m12 22V12M3 7l9 5 9-5"/></svg></span>
            <figure class="mb-0">
              <blockquote class="h4 fw-bold mb-3">“We shipped our dashboard in a weekend. The sign-in just worked.”</blockquote>
              <figcaption class="small lg-cap">Maya Chen, Product lead at Cubic</figcaption>
            </figure>
          </div>
        </div>
        <div class="col-lg-7">
          <div class="p-4 p-md-5">
            <div class="mb-4">
              <span class="wdw-icon mb-3 d-lg-none"><svg width="24" height="24" 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 2 9 5v10l-9 5-9-5V7z"/><path d="m12 22V12M3 7l9 5 9-5"/></svg></span>
              <h2 class="wdw-heading h3 mb-1">Welcome back</h2>
              <p class="wdw-muted mb-0">New here? <a href="#" class="fw-semibold text-decoration-none">Create an account</a></p>
            </div>
            <div class="row g-2 mb-3">
              <div class="col-4"><button type="button" class="btn btn-outline-secondary lg-social w-100 px-0 rounded-pill" aria-label="Continue with Google"><svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><path fill="#4285F4" d="M23.49 12.27c0-.79-.07-1.54-.19-2.27H12v4.51h6.47c-.29 1.48-1.14 2.73-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z"/><path fill="#34A853" d="M12 24c3.24 0 5.95-1.08 7.93-2.91l-3.86-3c-1.08.72-2.45 1.16-4.07 1.16-3.13 0-5.78-2.11-6.73-4.96H1.29v3.09C3.26 21.3 7.31 24 12 24z"/><path fill="#FBBC05" d="M5.27 14.29A7.2 7.2 0 0 1 4.89 12c0-.79.14-1.56.38-2.29V6.62H1.29A11.99 11.99 0 0 0 0 12c0 1.94.46 3.77 1.29 5.38l3.98-3.09z"/><path fill="#EA4335" d="M12 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C17.95 1.19 15.24 0 12 0 7.31 0 3.26 2.7 1.29 6.62l3.98 3.09C6.22 6.86 8.87 4.75 12 4.75z"/></svg></button></div>
              <div class="col-4"><button type="button" class="btn btn-outline-secondary lg-social w-100 px-0 rounded-pill" aria-label="Continue with GitHub"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.7-.3-5.5-1.3-5.5-5.9 0-1.3.5-2.4 1.2-3.2 0-.4-.5-1.6.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.6.2 2.8.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.5 5.9.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3z"/></svg></button></div>
              <div class="col-4"><button type="button" class="btn btn-outline-secondary lg-social w-100 px-0 rounded-pill" aria-label="Continue with X"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.2 2h3.3l-7.2 8.3L22.8 22h-6.6l-5.2-6.8L5 22H1.7l7.7-8.8L1.2 2H8l4.7 6.2zm-1.2 18h1.8L7 3.9H5.1z"/></svg></button></div>
            </div>
            <div class="lg-or text-center small wdw-muted mb-3"><span>or</span></div>
            <form id="loginForm" novalidate>
              <div class="d-grid gap-3">
                <div class="form-floating"><input type="email" class="form-control" id="lgEmail" placeholder="Email" value="[email protected]" autocomplete="username" required><label for="lgEmail">Email address</label><div class="invalid-feedback">Enter a valid email.</div></div>
                <div class="input-group has-validation">
                  <div class="form-floating"><input type="password" class="form-control is-invalid" id="lgPass" placeholder="Password" value="wrongpass" autocomplete="current-password" aria-describedby="lgPassMsg" required><label for="lgPass">Password</label></div>
                  <button type="button" class="btn btn-outline-secondary lg-eye" id="lgToggle" aria-label="Show password" aria-pressed="false"><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="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg></button>
                  <div class="invalid-feedback d-block" id="lgPassMsg" role="alert">Password error: that password is incorrect.</div>
                </div>
                <button type="submit" class="btn btn-primary rounded-pill w-100">Log in</button>
              </div>
              <div class="d-flex justify-content-between align-items-center mt-3 small">
                <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="text-decoration-none">Forgot password?</a>
              </div>
            </form>
          </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 buttons snippets