Login form
Bootstrap 5 Login form component
Responsive Login form built with Bootstrap 5. Lot of templates of signup forms and predefined form pages. Various design, styles and functionalities.
Basic example
<section class="vh-100">
<div class="container-fluid h-custom">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-md-9 col-lg-6 col-xl-5">
<img src="https://mdbootstrap.com/img/Photos/new-templates/bootstrap-login-form/draw2.webp" class="img-fluid"
alt="Sample image">
</div>
<div class="col-md-8 col-lg-6 col-xl-4 offset-xl-1">
<form>
<div class="d-flex flex-row align-items-center justify-content-center justify-content-lg-start">
<p class="lead fw-normal mb-0 me-3">Sign in with</p>
<button type="button" class="btn btn-primary btn-floating mx-1">
<i class="fab fa-facebook-f"></i>
</button>
<button type="button" class="btn btn-primary btn-floating mx-1">
<i class="fab fa-twitter"></i>
</button>
<button type="button" class="btn btn-primary btn-floating mx-1">
<i class="fab fa-linkedin-in"></i>
</button>
</div>
<div class="divider d-flex align-items-center my-4">
<p class="text-center fw-bold mx-3 mb-0">Or</p>
</div>
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" id="form3Example3" class="form-control form-control-lg"
placeholder="Enter a valid email address" />
<label class="form-label" for="form3Example3">Email address</label>
</div>
<!-- Password input -->
<div class="form-outline mb-3">
<input type="password" id="form3Example4" class="form-control form-control-lg"
placeholder="Enter password" />
<label class="form-label" for="form3Example4">Password</label>
</div>
<div class="d-flex justify-content-between align-items-center">
<!-- Checkbox -->
<div class="form-check mb-0">
<input class="form-check-input me-2" type="checkbox" value="" id="form2Example3" />
<label class="form-check-label" for="form2Example3">
Remember me
</label>
</div>
<a href="#!" class="text-body">Forgot password?</a>
</div>
<div class="text-center text-lg-start mt-4 pt-2">
<button type="button" class="btn btn-primary btn-lg"
style="padding-left: 2.5rem; padding-right: 2.5rem;">Login</button>
<p class="small fw-bold mt-2 pt-1 mb-0">Don't have an account? <a href="#!"
class="link-danger">Register</a></p>
</div>
</form>
</div>
</div>
</div>
<div class="d-flex flex-column flex-md-row text-center text-md-start justify-content-between py-4 px-4 px-xl-5 bg-primary">
<!-- Copyright -->
<div class="text-white mb-3 mb-md-0">
Copyright © 2020. All rights reserved.
</div>
<!-- Copyright -->
<!-- Right -->
<div>
<a href="#!" class="text-white me-4">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#!" class="text-white me-4">
<i class="fab fa-twitter"></i>
</a>
<a href="#!" class="text-white me-4">
<i class="fab fa-google"></i>
</a>
<a href="#!" class="text-white">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
<!-- Right -->
</div>
</section>
.divider:after,
.divider:before {
content: "";
flex: 1;
height: 1px;
background: #eee;
}
.h-custom {
height: calc(100% - 73px);
}
@media (max-width: 450px) {
.h-custom {
height: 100%;
}
}
Login form #2
We are The Lotus Team
We are more than just a company
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<section class="h-100 gradient-form" style="background-color: #eee;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-xl-10">
<div class="card rounded-3 text-black">
<div class="row g-0">
<div class="col-lg-6">
<div class="card-body p-md-5 mx-md-4">
<div class="text-center">
<img src="https://mdbootstrap.com/img/Photos/new-templates/bootstrap-login-form/lotus.webp" style="width: 185px;" alt="logo">
<h4 class="mt-1 mb-5 pb-1">We are The Lotus Team</h4>
</div>
<form>
<p>Please login to your account</p>
<div class="form-outline mb-4">
<input type="email" id="form2Example11" class="form-control" placeholder="Phone number or email address"/>
<label class="form-label" for="form2Example11">Username</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="form2Example22" class="form-control" />
<label class="form-label" for="form2Example22">Password</label>
</div>
<div class="text-center pt-1 mb-5 pb-1">
<button class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3" type="button">Log in</button>
<a class="text-muted" href="#!">Forgot password?</a>
</div>
<div class="d-flex align-items-center justify-content-center pb-4">
<p class="mb-0 me-2">Don't have an account?</p>
<button type="button" class="btn btn-outline-danger">Create new</button>
</div>
</form>
</div>
</div>
<div class="col-lg-6 d-flex align-items-center gradient-custom-2">
<div class="text-white px-3 py-4 p-md-5 mx-md-4">
<h4 class="mb-4">We are more than just a company</h4>
<p class="small mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.gradient-custom-2 {
/* fallback for old browsers */
background: #fccb90;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593);
}
@media (min-width: 768px) {
.gradient-form {
height: 100vh !important;
}
}
@media (min-width: 769px) {
.gradient-custom-2 {
border-top-right-radius: .3rem;
border-bottom-right-radius: .3rem;
}
}
Login form #3
<section class="vh-100">
<div class="container py-5 h-100">
<div class="row d-flex align-items-center justify-content-center h-100">
<div class="col-md-8 col-lg-7 col-xl-6">
<img src="https://mdbootstrap.com/img/Photos/new-templates/bootstrap-login-form/draw2.svg" class="img-fluid" alt="Phone image">
</div>
<div class="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
<form>
<!-- Email input -->
<div class="form-outline mb-4">
<input type="email" id="form1Example13" class="form-control form-control-lg" />
<label class="form-label" for="form1Example13">Email address</label>
</div>
<!-- Password input -->
<div class="form-outline mb-4">
<input type="password" id="form1Example23" class="form-control form-control-lg" />
<label class="form-label" for="form1Example23">Password</label>
</div>
<div class="d-flex justify-content-around align-items-center mb-4">
<!-- Checkbox -->
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="form1Example3"
checked
/>
<label class="form-check-label" for="form1Example3"> Remember me </label>
</div>
<a href="#!">Forgot password?</a>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary btn-lg btn-block">Sign in</button>
<div class="divider d-flex align-items-center my-4">
<p class="text-center fw-bold mx-3 mb-0 text-muted">OR</p>
</div>
<a class="btn btn-primary btn-lg btn-block" style="background-color: #3b5998" href="#!" role="button">
<i class="fab fa-facebook-f me-2"></i>Continue with Facebook
</a>
<a class="btn btn-primary btn-lg btn-block" style="background-color: #55acee" href="#!" role="button">
<i class="fab fa-twitter me-2"></i>Continue with Twitter</a>
</form>
</div>
</div>
</div>
</section>
.divider:after,
.divider:before {
content: "";
flex: 1;
height: 1px;
background: #eee;
}
Login form #4
<section class="vh-100" style="background-color: #9A616D;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-xl-10">
<div class="card" style="border-radius: 1rem;">
<div class="row g-0">
<div class="col-md-6 col-lg-5 d-none d-md-block">
<img
src="https://mdbootstrap.com/img/Photos/new-templates/bootstrap-login-form/img1.webp"
alt="login form"
class="img-fluid" style="border-radius: 1rem 0 0 1rem;"
/>
</div>
<div class="col-md-6 col-lg-7 d-flex align-items-center">
<div class="card-body p-4 p-lg-5 text-black">
<form>
<div class="d-flex align-items-center mb-3 pb-1">
<i class="fas fa-cubes fa-2x me-3" style="color: #ff6219;"></i>
<span class="h1 fw-bold mb-0">Logo</span>
</div>
<h5 class="fw-normal mb-3 pb-3" style="letter-spacing: 1px;">Sign into your account</h5>
<div class="form-outline mb-4">
<input type="email" id="form2Example17" class="form-control form-control-lg" />
<label class="form-label" for="form2Example17">Email address</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="form2Example27" class="form-control form-control-lg" />
<label class="form-label" for="form2Example27">Password</label>
</div>
<div class="pt-1 mb-4">
<button class="btn btn-dark btn-lg btn-block" type="button">Login</button>
</div>
<a class="small text-muted" href="#!">Forgot password?</a>
<p class="mb-5 pb-lg-2" style="color: #393f81;">Don't have an account? <a href="#!" style="color: #393f81;">Register here</a></p>
<a href="#!" class="small text-muted">Terms of use.</a>
<a href="#!" class="small text-muted">Privacy policy</a>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Login form #5
Logo
<section class="vh-100">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 text-black">
<div class="px-5 ms-xl-4">
<i class="fas fa-crow fa-2x me-3 pt-5 mt-xl-4" style="color: #709085;"></i>
<span class="h1 fw-bold mb-0">Logo</span>
</div>
<div class="d-flex align-items-center h-custom-2 px-5 ms-xl-4 mt-5 pt-5 pt-xl-0 mt-xl-n5">
<form style="width: 23rem;">
<h3 class="fw-normal mb-3 pb-3" style="letter-spacing: 1px;">Log in</h3>
<div class="form-outline mb-4">
<input type="email" id="form2Example17" class="form-control form-control-lg" />
<label class="form-label" for="form2Example17">Email address</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="form2Example27" class="form-control form-control-lg" />
<label class="form-label" for="form2Example27">Password</label>
</div>
<div class="pt-1 mb-4">
<button class="btn btn-info btn-lg btn-block" type="button">Login</button>
</div>
<p class="small mb-5 pb-lg-2"><a class="text-muted" href="#!">Forgot password?</a></p>
<p>Don't have an account? <a href="#!" class="link-info">Register here</a></p>
</form>
</div>
</div>
<div class="col-sm-6 px-0 d-none d-sm-block">
<img src="https://mdbootstrap.com/img/Photos/new-templates/bootstrap-login-form/img3.webp" alt="Login image" class="w-100 vh-100" style="object-fit: cover; object-position: left;">
</div>
</div>
</div>
</section>
.bg-image-vertical {
position: relative;
overflow: hidden;
background-repeat: no-repeat;
background-position: right center;
background-size: auto 100%;
}
@media (min-width: 1025px) {
.h-custom-2 {
height: 100%;
}
}
Login form #6
Don't have an account? Sign Up
<section class="vh-100 gradient-custom">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-8 col-lg-6 col-xl-5">
<div class="card bg-dark text-white" style="border-radius: 1rem;">
<div class="card-body p-5 text-center">
<div class="mb-md-5 mt-md-4 pb-5">
<h2 class="fw-bold mb-2 text-uppercase">Login</h2>
<p class="text-white-50 mb-5">Please enter your login and password!</p>
<div class="form-outline form-white mb-4">
<input type="email" id="typeEmailX" class="form-control form-control-lg" />
<label class="form-label" for="typeEmailX">Email</label>
</div>
<div class="form-outline form-white mb-4">
<input type="password" id="typePasswordX" class="form-control form-control-lg" />
<label class="form-label" for="typePasswordX">Password</label>
</div>
<p class="small mb-5 pb-lg-2"><a class="text-white-50" href="#!">Forgot password?</a></p>
<button class="btn btn-outline-light btn-lg px-5" type="submit">Login</button>
<div class="d-flex justify-content-center text-center mt-4 pt-1">
<a href="#!" class="text-white"><i class="fab fa-facebook-f fa-lg"></i></a>
<a href="#!" class="text-white"><i class="fab fa-twitter fa-lg mx-4 px-2"></i></a>
<a href="#!" class="text-white"><i class="fab fa-google fa-lg"></i></a>
</div>
</div>
<div>
<p class="mb-0">Don't have an account? <a href="#!" class="text-white-50 fw-bold">Sign Up</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
.gradient-custom {
/* fallback for old browsers */
background: #6a11cb;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1))
}
Login form #7
Sign in
<section class="vh-100" style="background-color: #508bfc;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-8 col-lg-6 col-xl-5">
<div class="card shadow-2-strong" style="border-radius: 1rem;">
<div class="card-body p-5 text-center">
<h3 class="mb-5">Sign in</h3>
<div class="form-outline mb-4">
<input type="email" id="typeEmailX" class="form-control form-control-lg" />
<label class="form-label" for="typeEmailX">Email</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="typePasswordX" class="form-control form-control-lg" />
<label class="form-label" for="typePasswordX">Password</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-start mb-4">
<input
class="form-check-input"
type="checkbox"
value=""
id="form1Example3"
/>
<label class="form-check-label" for="form1Example3"> Remember password </label>
</div>
<button class="btn btn-primary btn-lg btn-block" type="submit">Login</button>
<hr class="my-4">
<button class="btn btn-lg btn-block btn-primary" style="background-color: #dd4b39;" type="submit"><i class="fab fa-google me-2"></i> Sign in with google</button>
<button class="btn btn-lg btn-block btn-primary mb-2" style="background-color: #3b5998;" type="submit"><i class="fab fa-facebook-f me-2"></i>Sign in with facebook</button>
</div>
</div>
</div>
</div>
</div>
</section>