Bootstrap Login Form:- Hello readers, Today In this article I am going to show you how to create a Responsive Login Form using HTML, CSS & Bootstrap. This type of Responsive Bootstrap Login Form is used on the websites for Login Form. One of the most beautiful and good-looking designs of a Bootstrap Login Form.
You easily create Responsive Login Form using HTML, CSS & Bootstrap then this article will definitely help you. For this, you need to have an idea about basic HTML and CSS then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Bootstrap Login Form
The bootstrap grid system contains the row elements and the row elements are the containers of columns. Here we have those elements along with the container-fluid class so that we can place the entire login form in the required location. Inside the container section, left side image and right side simple login form with mobile responsive.
Watch the video tutorial to create Bootstrap Login Form
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made these Responsive Bootstrap Login Form step by step completely beautifully. So you can learn how to make these Bootstrap Login Form. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Responsive Bootstrap Login Form Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Responsive Sidebar Menu Using HTML, CSS & JS
- Animated Skills Bar UI Design Using HTML & CSS
- Personal Portfolio Website using HTML CSS & JS
Bootstrap Login Form | Source Codes
You have to create an HTML and CSS File For this Bootstrap Login Form. After creating these files just paste the following codes into your file.
The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use.
HTML CODE:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Login Form</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!----CSS link----->
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="d-flex align-items-center min-vh-100 py-3 py-md-0">
<div class="container">
<div class="card login-card">
<div class="row no-gutters">
<div class="col-md-5">
<img src="image/login.jpg" class="login-card-img">
</div>
<div class="col-md-7">
<div class="card-body">
<div class="brand-wrapper">
<img src="image/logo.svg" class="logo">
</div>
<p class="login-card-description">Sign into your account</p>
<form action="#!">
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<input type="email" name="email" id="email" class="form-control" placeholder="Email adress">
</div>
<div class="form-group mb-4">
<label for="Password" class="sr-only">Password</label>
<input type="password" name="password" id="password" class="form-control" placeholder="**********">
</div>
<input name="login" id="login" class="btn btn-block login-btn mb-4" type="button" value="Login">
</form>
<a href="#!" class="forgot-password-link">Forgot password</a>
<p class="login-card-footer-text">Don't have an account? <a href="#!" class="text-reset">Register here</a></p>
<nav class="login-card-footer-nav">
<a href="#!">Terms of use.</a>
<a href="#!">Privacy policy</a>
</nav>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
body{
font-family: "karla", sans-serif;
background-color: #d0d0ce;
min-height: 100vh;
}
.brand-wrapper{
margin-bottom: 19px;
}
.brand-wrapper .logo{
height: 37px;
}
.login-card{
border: 0;
border-radius: 27.5px;
box-shadow: 0 10px 30px 0 rgba(172, 168, 168, 0.43);
overflow: hidden;
}
.login-card-img{
border-radius: 0;
position: absolute;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.login-card .card-body{
padding: 85px 60px 60px;
}
@media (max-width 422px) {
.login-card .card-body{
padding: 35px 24px;
}
}
.login-card-description{
font-size: 25px;
color: #000;
font-weight: normal;
margin-bottom: 23px;
}
.login-card form{
max-width: 326px;
}
.login-card .form-control{
border: 1px solid #d5dae2;
padding: 15px 25px;
margin-bottom: 20px;
min-height: 45px;
font-size: 13px;
line-height: 15;
font-weight: normal;
}
.login-card .form-control::-webkit-input-placeholder{
color: #919aa3;
}
.login-card .form-control::-moz-input-placeholder{
color: #919aa3;
}
.login-card .form-control::-ms-input-placeholder{
color: #919aa3;
}
.login-card .form-control::-o-input-placeholder{
color: #919aa3;
}
.login-card .form-control::placeholder{
color: #919aa3;
}
.login-card .login-btn{
padding: 13px 20px 12px;
background-color: #000;
border-radius: 4px;
font-size: 17px;
font-weight: bold;
line-height: 20px;
color: #fff;
margin-bottom: 24px;
}
.login-card .login-btn:hover{
border: 1px solid #000;
background-color: transparent;
color: #000;
}
.login-card .forgot-password-link{
font-size: 14px;
color: #919aa3;
margin-bottom: 12px;
}
.login-card-footer-text{
font-size: 16px;
color: #0d2366;
margin-bottom: 60px;
}
@media (max-width: 767px) {
.login-card-footer-text{
margin-bottom: 24px;
}
}
.login-card-footer-nav a{
font-size: 14px;
color: #919aa3;
}now you’ve successfully created these Responsive Bootstrap Login Form HTML, CSS & Bootstrap. If your code does not work or facing any error/problem to comment down or contact us through the contact page. otherwise, you can download all source code.
