In the world of evolving web development, creating responsive and visually appealing user interfaces is a top priority. In this comprehensive tutorial, we will guide you through the process of designing a fully responsive login page using the power of Bootstrap 5.
By the end of this tutorial, you’ll have the knowledge and skills to create a modern, user-friendly login page in few minutes and that looks great on any device.
What is Bootstrap?
Bootstrap is a free, open source front-end development framework for the creation of websites and web applications. It enables rapid development of responsive websites. It minifies CSS codes into simple and understandable small codes( e.g CSS Property -> display: flex; to <div class=”d-flex”> ). In this tutorial you will learn how to use this framework to create a responsive login form.
What is a Login Form?
A login form is a section on a website or app that allows you to identify yourself and gain access to protected areas in a website or application. So in this blog we will learn how to make the login form using bootstrap.
Related posts:
- https://www.ludiflex.com/responsive-animated-bootstrap-login-form/
- https://www.ludiflex.com/modern-login-form-made-using-html-and-css/
- https://www.ludiflex.com/animated-login-and-sign-up-form-using-html-css-and-javascript/
- https://www.ludiflex.com/animated-modern-login-form-with-html-and-css-only/
HTML & Bootstrap Codes
We will start by creating a new file to write HTML codes. You can name it index.html. That’s also where will put our bootstrap classes. If you take a look below in the codes, you can see that we have a lot of class in each tag that’s because the way bootstrap works is by using utility classes. This means that we don’t have to worry much about CSS, because by using bootstrap classes, you get access to pre-defined CSS. And this simplifies you work. In order to use Bootstrap, you can download it or use it online by connecting it with you project using<link>tag. If you don’t understand, I recommend you to follow the video tutorial and learn how to do it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Boostrap Login | Ludiflex</title>
</head>
<body>
<!----------------------- Main Container -------------------------->
<div class="container d-flex justify-content-center align-items-center min-vh-100">
<!----------------------- Login Container -------------------------->
<div class="row border rounded-5 p-3 bg-white shadow box-area">
<!--------------------------- Left Box ----------------------------->
<div class="col-md-6 rounded-4 d-flex justify-content-center align-items-center flex-column left-box" style="background: #103cbe;">
<div class="featured-image mb-3">
<img src="images/1.png" class="img-fluid" style="width: 250px;">
</div>
<p class="text-white fs-2" style="font-family: 'Courier New', Courier, monospace; font-weight: 600;">Be Verified</p>
<small class="text-white text-wrap text-center" style="width: 17rem;font-family: 'Courier New', Courier, monospace;">Join experienced Designers on this platform.</small>
</div>
<!-------------------- ------ Right Box ---------------------------->
<div class="col-md-6 right-box">
<div class="row align-items-center">
<div class="header-text mb-4">
<h2>Hello,Again</h2>
<p>We are happy to have you back.</p>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control form-control-lg bg-light fs-6" placeholder="Email address">
</div>
<div class="input-group mb-1">
<input type="password" class="form-control form-control-lg bg-light fs-6" placeholder="Password">
</div>
<div class="input-group mb-5 d-flex justify-content-between">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="formCheck">
<label for="formCheck" class="form-check-label text-secondary"><small>Remember Me</small></label>
</div>
<div class="forgot">
<small><a href="#">Forgot Password?</a></small>
</div>
</div>
<div class="input-group mb-3">
<button class="btn btn-lg btn-primary w-100 fs-6">Login</button>
</div>
<div class="input-group mb-3">
<button class="btn btn-lg btn-light w-100 fs-6"><img src="images/google.png" style="width:20px" class="me-2"><small>Sign In with Google</small></button>
</div>
<div class="row">
<small>Don't have account? <a href="#">Sign Up</a></small>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Additional CSS codes
We have created custom CSS in order to make our login form look amazing and unique. There is nothing difficult that we did here, for instance we used it to change the font family to “Poppins” and adding other few properties in order to keep our project clean.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
body{
font-family: 'Poppins', sans-serif;
background: #ececec;
}
/*------------ Login container ------------*/
.box-area{
width: 930px;
}
/*------------ Right box ------------*/
.right-box{
padding: 40px 30px 40px 40px;
}
/*------------ Custom Placeholder ------------*/
::placeholder{
font-size: 16px;
}
.rounded-4{
border-radius: 20px;
}
.rounded-5{
border-radius: 30px;
}
/*------------ For small screens------------*/
@media only screen and (max-width: 768px){
.box-area{
margin: 0 10px;
}
.left-box{
height: 100px;
overflow: hidden;
}
.right-box{
padding: 20px;
}
}
It was simple, right? Now we have a login form created in bootstrap 5 and some additional CSS codes. If you are a beginner or new to Bootstrap, now you have a clear picture of how you can use it make some awesome projects. If you have any problem or you got stuck, leave a comment. I will be happy to help.
Download Assets File from the link below:
2 Comments
Unable to download resource, please assign accessed.
Hello, now the access is updated.