5+ Bootstrap Login Form Examples

This post contains a total of 5+ Bootstrap Login Form Examples with Source Code. All these Login Forms are made using Bootstrap.

You can use the source code of these examples with credits to the original owner.

Related Posts

Bootstrap Login Form Examples

1. By Srinivasan K K

Made by Srinivasan K K. Bootstrap Login form and Register Form. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css'>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --login-bg-color: #308aed;
  --login-text-color: #fff;
  --signup-bg-color: #3eb300;
  --signup-text-color: #fff;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 150vh;
}

.login {
  background-color: var(--login-bg-color);
  border-radius: 5px;
  color: var(--login-text-color);
  padding: 20px;
}

.signup {
  background-color: var(--signup-bg-color);
  border-radius: 5px;
  color: var(--signup-text-color);
  padding: 20px;
}
</style>
</head>
<body>
  <div class="container login p-5 w-50 mb-3">
  <div class="row">
    <form name="loginForm" class="col-sm-6 offset-sm-3" novalidate auto-complete="off">
      <div class="text-center mb-5"><i class="fa fa-sign-in-alt fa-3x"></i></div>
      <div class="form-row">
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" id="username-addon">๐Ÿ‘ค</span>
          </div>
          <input type="text" class="form-control" placeholder="Username" aria-label="username" aria-describedby="username-addon">
        </div>
      </div>
      <div class="form-row">
        <div class="input-group mb-5">
          <div class="input-group-prepend">
            <span class="input-group-text" id="password-addon">๐Ÿ”‘</span>
          </div>
          <input type="password" class="form-control" placeholder="Password" aria-label="password" aria-describedby="password-addon">
        </div>
      </div>
      <input type="button" class="btn btn-outline-light btn-block" value="Login" />
    </form>
  </div>
</div>

<div class="container signup p-5 w-50 mb-5">
  <form name="signupForm" novalidate auto-complete="off">
    <div class="text-center mb-5"><i class="fas fa-user-plus fa-3x"></i></div>
    <div class="form-group">
      <label for="name" class="sr-only">Full Name</label>
      <input type="text" class="form-control" placeholder="Fullname" id="name" required />
      <div class="invalid-feedback">Full name is mandatory!!!</div>
    </div>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text" id="username-addon">๐Ÿ‘ค</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="username" aria-describedby="username-addon">
    </div>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text" id="emailId-addon">โœ‰</span>
      </div>
      <input type="email" class="form-control" placeholder="Email" aria-label="email" aria-describedby="emailId-addon">
    </div>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text" id="password-addon">๐Ÿ”‘</span>
      </div>
      <input type="password" class="form-control" placeholder="Password" aria-label="password" aria-describedby="password-addon">
    </div>
    <div class="input-group mb-5">
      <div class="input-group-prepend">
        <span class="input-group-text" id="mobile-addon">๐Ÿ“ž</span>
      </div>
      <input type="tel" class="form-control" placeholder="Mobile No." aria-label="mobile" aria-describedby="mobile-addon">
    </div>
    <input type="button" class="btn btn-outline-light btn-block" value="Register" />
  </form>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.0/umd/popper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js'></script>
      <script>
const loginForm = document.querySelector("form[name='loginForm']");
const signupForm = document.querySelector("form[name='signupForm']");
const username = document.querySelector("#usernameId");
const email = document.querySelector("#emailId");
const password = document.querySelector("#passwordId");

window.addEventListener(
"load",
function (e) {
  if (loginForm) {
    loginForm.addEventListener(
    "submit",
    function (event) {
      console.log(loginForm);
      if (!loginForm.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
        loginForm.classList.add("was-validated");
      }
    },
    false);

  }

  if (signupForm) {
    signupForm.addEventListener(
    "submit",
    function (event) {
      console.log(signupForm);
      if (!signupForm.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
        signupForm.classList.add("was-validated");
      }
    },
    false);

  }
},
false);
    </script>
</body>
</html>

2. By Kunal Dholiya

Made by Kunal Dholiya. Bootstrap Login form with Button hover effect. Source

Bootstrap Login form by Kunal Dholiya
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway:300');
@import url('https://fonts.googleapis.com/css?family=Quicksand');

*{
	margin: 0;
	padding: 0;
	text-decoration: none;
}

.heading_h1{
	color: #00a4e4;
	font-family: 'Raleway', sans-serif;
	margin-top: 100px;
	margin-bottom: 20px;
}

.heading_h1 .sub_h1{
	color: #13293d;
	font-weight: bolder;
}

.loginContainer{
	background-color: #13293d;
	height: 400px;
	border-radius: 10px;
	padding-top: 100px;
	font-family: 'Quicksand', sans-serif;
}

input[type="text"]{
    border-radius:30px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
}

input[type="text"]:focus{
	border: 2px solid #ffa400;
}

input[type="password"]{
    border-radius:30px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
}

input[type="password"]:focus{
	border: 2px solid #ffa400;
}

.login_btn{
	background-color: #ffa400;
	border: 1px solid #ffa400;
	border-radius: 10px;
	color: #fff;
	padding: 5px 50px;
	font-size: 18px;
	margin-bottom: 5px;
	transition: .9s all;
}

.login_btn:hover{
	background-color: #00a4e4;
	border:1px solid #00a4e4;
	border-radius: 50px;
}

.forgotLink a{
	text-decoration: none;
	color: #d2d2d2;
}

.signupLink{
	color: #d2d2d2;
}

.signupLink a{
	text-decoration: none;
	color: #00a4e4;
}
</style>
</head>
<body>
<div class="container mainContent">
	<h1 class="text-center heading_h1">HackerBytes <span class="sub_h1">- Log In</span></h1>
	<div class="row">
		<div class="col-md-6 col-md-offset-3 col-xs-6 col-xs-offset-3 loginContainer">
			<form method="post">
				<div class="col-md-8 col-md-offset-2 col-xs-8 col-xs-offset-2 form-group">
					<input type="text" name="username" placeholder="Username" class="form-control" required="" />
				</div>

				<div class="col-md-8 col-md-offset-2 col-xs-8 col-xs-offset-2  form-group">
					<input type="password" name="password" placeholder="Password" class="form-control" required="" />
				</div>

				<div class="col-md-8 col-md-offset-2 col-xs-8 col-xs-offset-2  form-group" align="center">
					<button class="login_btn" name="login">Log In</button>
					<p class="forgotLink"><a href=""> Forgot Password? </a></p>
				</div>
			</form>

			<div class="col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1" align="center">
				<p class="signupLink">Not Registered?<a href="" class="signup"> Create an Account. </a></p>
			</div>
		</div>
	</div>
</div>

	<!-- jQuery CDN -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	<!-- Bootstrap JS CDN -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

3. By Ganesh

Made by Ganesh. Prism bootstrap login form. Source

Bootstrap Login form by Ganesh
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> 
<style>
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');

body{
  font-family: 'Titillium Web', sans-serif;
  background-image: url("https://images.pexels.com/photos/921288/pexels-photo-921288.png?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  width: 100%;
  backgroud-position: bottom !important;
  backgroud-repeat: no-repeat;
  backgroud-size: cover;
background-position: bottom;
}

.pt-4 {
  margin-top: 4rem !important;
}
.bg-white{
  backgroud-color: #fff;
}
button.btn-primary {
  background-color: #FFCC00 !important;
  border: none;
}

.color-bk{
  color: #333;
}
</style>
</head>
<body>
  <div class="container pt-4">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card-group">
        <div class="card">
          <div class="card-body">
            <h1>Sign In</h1>
            <p class="text-muted">Sign In to your account</p>
            <div class="form-group input-group">
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <i class="fa fa-user"></i>
                </span>
              </div>
              <input class="form-control" type="text" placeholder="Username">
            </div>
            <div class="input-group mb-4">
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <i class="fa fa-key"></i>
                </span>
              </div>
              <input class="form-control" type="password" placeholder="Password">
            </div>
          <div class="row">
             <div class="col-6">
              <button class="btn btn-primary px-4" type="button">Login</button>
            </div>
            <div class="col-6 text-right">
               <button class="btn btn-link px-0" type="button">Forgot password?             
                  </button>
            </div>
          </div>
        </div>
      </div>
      <div class="card text-white bg-white d-md-down-none" style="width:44%">
        <div class="card-body text-center">
          <div class="color-bk">
            <h2>Sign up</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <button class="btn btn-primary active mt-3" type="button">Register Now!</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</body>
</html>

4. By Sriram veeraghanta

Made by Sriram veeraghanta. Simplistic login form. Source

Bootstrap Login form by Sriram veeraghanta
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<style>
:root {
  --primary-color: #e53935;
  --secondry-color: #c62828;
}
a{
  color: #1976D2;
}
.form-footer {
  text-align: center;
}

.form-footer a {
  text-decoration: underline;
}

.login-from-input {
  width: 100%;
  border: 2px solid #ccc;
  font-size: 18px;
  padding: 7px 10px;
  border-radius: 3px;
}

.login-from-input:hover {
  border-color: #aaa;
}

.login-from-input:focus {
  border: 2px solid var(--primary-color);
}

.form-group label {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 400;
}

.page-title {
  color: var(--primary-color);
  margin-bottom: 30px;
}

input:focus,
textarea:focus,
keygen:focus,
select:focus {
  outline-offset: 0px;
}

:focus {
  outline: none;
}

.login-btn {
  width: 100%;
  padding: 10px;
  color: #fff;
  background-color: var(--primary-color);
  border: none;
  border-radius: 3px;
}

.login-btn:hover {
  background-color: var(--secondry-color);
}
</style>
</head>
<body>
  <div class="container">
  <div class="col-sm-4 col-sm-offset-4">
    <form>
      <h1 class="text-center page-title">Login</h1>
      <div class="form-group">
        <label>Username</label>
        <input type="text" class="login-from-input">
      </div>
      <div class="form-group">
        <div>
          <label>Password</label>
        </div>
        <input type="password" class="login-from-input password-input">
      </div>
      <div class="form-group">
        <input type="submit" class="login-btn" />
      </div>
      <div class="form-group form-footer">
        <p>Dont have an account? <a href="" title="">Create Account</a></p>
        <p><a href="" title="">Forgot Password?</a></p>
      </div>
    </form>
  </div>
</div>
</body>
</html>

5. By Rohit Maharjan

Made by Rohit Maharjan. Bootstrap Login Form with Header Image. Source

Bootstrap Login form by Rohit Maharjan
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<style>
.login-wrp{
   max-width: 400px;
   width: 100%;
   margin: 50px auto;
}
.top{
   background: #131BE1;
   height: 300px;
   position: relative
}
.logo{
   position: absolute;
   max-width: 100px;
   top: 28%;
   left: 50%;
   transform: translateX(-50%);
   -webkit-transform: translateX(-50%);
}
.bottom{
   background: #eee;
   height: 300px;
   position:relative;
}
.bottom .login-form{
   background: #fff;
   position: absolute;
   box-shadow: 1px 1px 10px #999;
   width: 90%;
   top:-38%;
   left: 5%;
   border-radius: 5px;
   padding: 50px 40px;
}
.btn{
   border-radius: 30px
}
.btn-primary{
   background: #F8C407;
   border-color: #F8C407;
}
.btn-primary:hover,.btn-primary:focus{
   background: #F8C407;
   border-color: #F8C407
}
.checkbox-inline{
   cursor: pointer;
}
.btn-link{
   color: #999;
   margin-top: 10px;
   display: block
}
.btn-link:hover,.btn-link:focus{
   color: #777;
}
</style>
</head>
<body>
  <div class="login-wrp">
   <div class="top">
      <div class="logo">
         <img src="https://upload.wikimedia.org/wikipedia/commons/3/33/Pringles_logo.png" alt="" width="100px">
      </div>
   </div>
   <div class="bottom">
      <form action="" class="login-form">
         <div class="form-group">
            <input type="text" class="form-control" placeholder="Username">
         </div>
         <div class="form-group">
            <input type="password" class="form-control" placeholder="Password">
         </div>
<!--          <div class="form-group">
            <label class="checkbox-inline"><input type="checkbox" value=""> Keep me sign in</label>
         </div> -->
         <a href="#" class="btn btn-primary btn-block">Login</a>
         <p class="text-center"><small><a href="#" class="btn-link">Forgot password</a></small></p>
      </form>
   </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'></script>
</body>
</html>

6. By Luis Manoel

Made by Luis Manoel. Simple bootstrap login form. Source

Bootstrap Login form by Luis Manoel
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
body {
    background-color: #eee!important;
}

.login {
    background-color: #fff;
    width: 40%;
    margin: 80px auto;
    border-radius: 10px;
    padding: 20px;
    border-left: 5px solid #009688;
    box-shadow: 0px 0px 0px 0px #3f51b5;
}

.login>.row>h2 {
    margin: auto;
}

.btn-form {
    width: 100%;
    margin-top: 20px;
}
</style>
</head>
<body>
    <div class="container">
        <div class="login">
            <div class="row">
                <h2>Sign Up</h2>
                <div class="col-md-12">
                    <label for="email">Email</label>
                    <input type="text" class="form-control" id="email" placeholder="Ex. [email protected]">
                    <br>
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Ex. [email protected]">
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <input type="reset" id="reset" value="Reset" class="btn btn-outline-primary btn-form">
                </div>
                <div class="col-md-6">
                    <input type="submit" id="register" value="Signup" class="btn btn-outline-success btn-form">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>