In the realm of web development, responsive and visually appealing login forms are crucial for ensuring a seamless user experience on a variety of devices. This tutorial will guide you through the process of designing a responsive and animated login form using Bootstrap, a popular front-end framework.
By the end of this tutorial, you’ll have the skills to create an engaging and adaptable login form that enhances the user experience on both desktop and mobile platforms.
Login forms are used in most of website and Application. The login form helps the user to get access to website or web application they are browsing. (To access their data)
Steps:
- Setting Up the Project:
- Learn how to set up your project environment and include Bootstrap in your project.
- Creating the HTML Structure:
- Build the basic HTML structure for your login form, utilizing Bootstrap’s responsive grid system.
- Styling with Bootstrap:
- Explore how to style your form with Bootstrap classes for responsiveness and user-friendly design.
- Adding Animation Effects:
- Enhance your login form with animated effects to make it engaging and visually appealing.
- Mobile-Friendly Design:
- Ensure that your form looks and functions well on smaller screens, catering to mobile users.
So a login form should be well designed. To make this login form we are going to start by.
Creating a HTML File which contains Bootstrap codes and add the following codes.
HTML & Bootstrap Codes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Login</title>
</head>
<body>
<div class="wrapper">
<div class="container main">
<div class="row">
<div class="col-md-6 side-image">
<!------------- image ------------->
<img src="images/white.png" alt="">
<div class="text">
<p>Join the community of developers <i>- ludiflex</i></p>
</div>
</div>
<div class="col-md-6 right">
<div class="input-box">
<header>Create account</header>
<div class="input-field">
<input type="text" class="input" id="email" required="" autocomplete="off">
<label for="email">Email</label>
</div>
<div class="input-field">
<input type="password" class="input" id="pass" required="">
<label for="pass">Password</label>
</div>
<div class="input-field">
<input type="submit" class="submit" value="Sign Up">
</div>
<div class="signin">
<span>Already have an account? <a href="#">Log in here</a></span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Additional CSS codes
/* POPPINS FONT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
font-family: 'Poppins', sans-serif;
}
.wrapper{
background: #ececec;
padding: 0 20px 0 20px;
}
.main{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.side-image{
background-image: url("images/2.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 10px 0 0 10px;
position: relative;
}
.row{
width: 900px;
height:550px;
border-radius: 10px;
background: #fff;
padding: 0px;
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.2);
}
.text{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text p{
color: #fff;
font-size: 20px;
}
i{
font-weight: 400;
font-size: 15px;
}
.right{
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.input-box{
width: 330px;
box-sizing: border-box;
}
img{
width: 35px;
position: absolute;
top: 30px;
left: 30px;
}
.input-box header{
font-weight: 700;
text-align: center;
margin-bottom: 45px;
}
.input-field{
display: flex;
flex-direction: column;
position: relative;
padding: 0 10px 0 10px;
}
.input{
height: 45px;
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
outline: none;
margin-bottom: 20px;
color: #40414a;
}
.input-box .input-field label{
position: absolute;
top: 10px;
left: 10px;
pointer-events: none;
transition: .5s;
}
.input-field input:focus ~ label
{
top: -10px;
font-size: 13px;
}
.input-field input:valid ~ label
{
top: -10px;
font-size: 13px;
color: #5d5076;
}
.input-field .input:focus, .input-field .input:valid{
border-bottom: 1px solid #743ae1;
}
.submit{
border: none;
outline: none;
height: 45px;
background: #ececec;
border-radius: 5px;
transition: .4s;
}
.submit:hover{
background: rgba(37, 95, 156, 0.937);
color: #fff;
}
.signin{
text-align: center;
font-size: small;
margin-top: 25px;
}
span a{
text-decoration: none;
font-weight: 700;
color: #000;
transition: .5s;
}
span a:hover{
text-decoration: underline;
color: #000;
}
@media only screen and (max-width: 768px){
.side-image{
border-radius: 10px 10px 0 0;
}
img{
width: 35px;
position: absolute;
top: 20px;
left: 47%;
}
.text{
position: absolute;
top: 70%;
text-align: center;
}
.text p, i{
font-size: 16px;
}
.row{
max-width:420px;
width: 100%;
}
}
Think it was understandable. If you have any problem, leave a comment.
I will be pleased to help.
2 Comments
Very nice effort
Thank you