Skip to content

Instantly share code, notes, and snippets.

@daviwesley

daviwesley/login_bootstrap.html

Created August 3, 2022 22:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save daviwesley/efce00ab9c7a1d9d38a0249425d53334 to your computer and use it in GitHub Desktop.
Save daviwesley/efce00ab9c7a1d9d38a0249425d53334 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
login_bootstrap.html
Edit in JSFiddle
Result
HTML
CSS
JavaScript
Resources
<!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! -->
<body>
<div class="container">
<div class="row">
<div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
<div class="card border-0 shadow rounded-3 my-5">
<div class="card-body p-4 p-sm-5">
<h5 class="card-title text-center mb-5 fw-light fs-5">Sign In</h5>
<form>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating mb-3">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" value="" id="rememberPasswordCheck">
<label class="form-check-label" for="rememberPasswordCheck">
Remember password
</label>
</div>
<div class="d-grid">
<button class="btn btn-primary btn-login text-uppercase fw-bold" type="submit">Sign
in</button>
</div>
<hr class="my-4">
<div class="d-grid mb-2">
<button class="btn btn-google btn-login text-uppercase fw-bold" type="submit">
<i class="fab fa-google me-2"></i> Sign in with Google
</button>
</div>
<div class="d-grid">
<button class="btn btn-facebook btn-login text-uppercase fw-bold" type="submit">
<i class="fab fa-facebook-f me-2"></i> Sign in with Facebook
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment