Looking for a stylish and responsive login form template for your website? Look no further! This Bootstrap 5 login form template is just what you need. With a clean and modern design, this code snippet provides an intuitive and user-friendly login experience.
The form includes essential elements such as email and password fields, along with useful features like a “Remember Me” checkbox and a password recovery link. The form is enhanced with FontAwesome icons and utilizes Bootstrap’s grid system to ensure seamless responsiveness across different devices.
Whether you’re building a new login page or updating an existing one, this Bootstrap 5 template is a perfect choice to create an attractive and functional login form.
How to Create Bootstrap 5 Login Form
First of all, load the Bootstrap 5 CSS and Font Awesome by adding the following CDN link to the head tag of your webpage.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> <script src="https://use.fontawesome.com/f59bcd8580.js"></script>
Now, create the HTML structure for login form as follows:
<div class="container">
<div class="row m-5 no-gutters shadow-lg">
<div class="col-md-6 d-none d-md-block">
<img src="https://images.unsplash.com/photo-1566888596782-c7f41cc184c5?ixlib=rb-1.2.1&auto=format&fit=crop&w=2134&q=80" class="img-fluid" style="min-height:100%;" />
</div>
<div class="col-md-6 bg-white p-5">
<h3 class="pb-3">Login Form</h3>
<div class="form-style">
<form>
<div class="form-group pb-3">
<input type="email" placeholder="Email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
</div>
<div class="form-group pb-3">
<input type="password" placeholder="Password" class="form-control" id="exampleInputPassword1">
</div>
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center"><input name="" type="checkbox" value="" /> <span class="pl-2 font-weight-bold">Remember Me</span></div>
<div><a href="#">Forget Password?</a></div>
</div>
<div class="pb-2">
<button type="submit" class="btn btn-dark w-100 font-weight-bold mt-2">Submit</button>
</div>
</form>
<div class="sideline">OR</div>
<div>
<button type="submit" class="btn btn-primary w-100 font-weight-bold mt-2"><i class="fa fa-facebook" aria-hidden="true"></i> Login With Facebook</button>
</div>
<div class="pt-4 text-center">
Get Members Benefit. <a href="#">Sign Up</a>
</div>
</div>
</div>
</div>
</div>
Style the login page using the following CSS styles:
body{
background: #c9ccd1;
}
.form-style input{
border:0;
height:50px;
border-radius:0;
border-bottom:1px solid #ebebeb;
}
.form-style input:focus{
border-bottom:1px solid #007bff;
box-shadow:none;
outline:0;
background-color:#ebebeb;
}
.sideline {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
text-align: center;
color:#ccc;
}
button{
height:50px;
}
.sideline:before,
.sideline:after {
content: '';
border-top: 1px solid #ebebeb;
margin: 0 20px 0 0;
flex: 1 0 20px;
}
.sideline:after {
margin: 0 0 0 20px;
}
That’s all! hopefully, you have successfully integrated this Bootstrap 5 login page template into your project. If you have any questions or suggestions, feel free to comment below.
