Web Designer Wall

Snippets Dropdown

Bootstrap 5 Login and Signup Form with Country Dropdown

A sign-in and sign-up card with pill tabs, social sign-in buttons, and a registration form that includes a country dropdown.

Bootstrap 5 No jQuery Apr 2020 2.3K views 

<section class="wdw-stage">
  <div class="container" style="max-width:920px">
    <div class="auth-root wdw-card overflow-hidden">
      <div class="row g-0">
        <div class="col-lg-5 d-none d-lg-flex">
          <div class="wdw-aurora p-5 d-flex flex-column justify-content-between w-100">
            <span class="fw-bold fs-5">Acme</span>
            <div>
              <h2 class="fw-bold h2 mb-3">Build faster with a team that ships.</h2>
              <ul class="list-unstyled d-grid gap-2 mb-4 opacity-75 small">
                <li>✓ Free 14-day trial</li>
                <li>✓ No credit card needed</li>
                <li>✓ Cancel any time</li>
              </ul>
              <figure class="mb-0 small border-top border-light border-opacity-25 pt-3"><blockquote class="mb-1">“We went from idea to launch in a week.”</blockquote><figcaption class="opacity-75">Maya Chen, Product Lead</figcaption></figure>
            </div>
          </div>
        </div>
        <div class="col-lg-7">
          <div class="p-4 p-md-5">
            <div class="mb-4">
              <h1 class="wdw-heading h3 mb-1" id="authTitle">Create your account</h1>
              <p class="wdw-muted mb-0" id="authSub">Join in under a minute. No credit card needed.</p>
            </div>
            <ul class="nav nav-pills nav-fill auth-tabs p-1 rounded-pill mb-4" id="authTabs" role="tablist">
        <li class="nav-item" role="presentation"><button class="nav-link rounded-pill" id="tab-in" data-bs-toggle="pill" data-bs-target="#pane-in" type="button" role="tab" aria-controls="pane-in" aria-selected="false" data-title="Welcome back" data-sub="Sign in to your account to continue.">Sign in</button></li>
        <li class="nav-item" role="presentation"><button class="nav-link rounded-pill active" id="tab-up" data-bs-toggle="pill" data-bs-target="#pane-up" type="button" role="tab" aria-controls="pane-up" aria-selected="true" data-title="Create your account" data-sub="Join in under a minute. No credit card needed.">Sign up</button></li>
      </ul>
            <div class="row g-2 mb-3">
              <div class="col-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-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.41c.58.11.79-.25.79-.56v-2c-3.2.7-3.88-1.35-3.88-1.35-.52-1.33-1.28-1.69-1.28-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.03 1.76 2.7 1.25 3.36.96.1-.75.4-1.25.73-1.54-2.56-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.47.11-3.06 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.62 1.59.23 2.77.11 3.06.74.81 1.18 1.84 1.18 3.1 0 4.42-2.69 5.39-5.26 5.67.41.36.78 1.06.78 2.14v3.17c0 .31.21.68.8.56A11.5 11.5 0 0 0 12 .5z"/></svg>GitHub</button></div>
            </div>
            <div class="d-flex align-items-center gap-3 mb-3 wdw-muted small"><hr class="flex-grow-1 m-0"><span>or with email</span><hr class="flex-grow-1 m-0"></div>
            <div class="tab-content">
              <form class="tab-pane fade" id="pane-in" role="tabpanel" aria-labelledby="tab-in" tabindex="0" novalidate>
          <div class="form-floating mb-3"><input type="email" class="form-control" id="inEmail" placeholder="Email" autocomplete="email"><label for="inEmail">Email address</label></div>
          <div class="form-floating mb-3"><input type="password" class="form-control" id="inPass" placeholder="Password" autocomplete="current-password"><label for="inPass">Password</label></div>
          <div class="text-end mb-3"><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>
              <form class="tab-pane fade show active" id="pane-up" role="tabpanel" aria-labelledby="tab-up" tabindex="0" novalidate>
          <div class="form-floating mb-3"><input type="text" class="form-control" id="upName" placeholder="Full name" value="Alex Morgan" autocomplete="name"><label for="upName">Full name</label></div>
          <div class="form-floating mb-3"><input type="email" class="form-control" id="upEmail" placeholder="Email" autocomplete="email"><label for="upEmail">Email address</label></div>
          <div class="row g-2 mb-3"><div class="col-sm-6"><div class="form-floating">
            <select class="form-select" id="upCountry" autocomplete="country-name">
              <option value="" disabled>Select country</option>
              <option>Australia</option><option>Canada</option><option>France</option><option>Germany</option><option>India</option><option>Japan</option><option>Latvia</option><option selected>Sweden</option><option>United Kingdom</option><option>United States</option>
            </select>
            <label for="upCountry">Country</label>
          </div></div>
          <div class="col-sm-6"><div class="form-floating"><input type="password" class="form-control" id="upPass" placeholder="Password" autocomplete="new-password"><label for="upPass">Create password</label></div></div></div>
          <div class="form-check mb-3"><input class="form-check-input" type="checkbox" id="upTerms"><label class="form-check-label small" for="upTerms">I agree to the <a href="#">Terms</a> and <a href="#">Privacy Policy</a></label></div>
          <button type="submit" class="btn btn-primary rounded-pill w-100">Create account</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.

Related snippets

More dropdown snippets