Hello readers, we all already know that most websites we visited are determined to have a user account to access, especially on eCommerce websites where you need to buy books you liked. So this is really important to know this tutorial because I gotta show you how to create a login and create a login form with Bootstrap Framework which is one of the popular Frameworks that most developers knew.
Question: How can I create a login form by using Bootstrap 5?
Answer: After you read and watch this video tutorial, you will know and can create a pretty login form by using Bootstrap with Rean Fullstack.
What is the login form?
As we know, the login form is a form where users need to enter his/her email, and password to enter and use their account on any webpage. We can take the example of Facebook. On Facebook, we have to enter our username email, phone number, and password to log in before we can access our Facebook account. That is called Login Form.
What should a login page have?
There are lots of things that we can add to the login form, and those are really important like:
- Username field
- Email field
- Phone number field
- Password field
- Forgot password field
- Submit button
- Show/hide password field
- Alternative login options(Facebook, Instagram, Google...etc)
As you saw look at an image of the login form above which I have provided on the webpage, is also the login form. Today we gotta build this login form as shown. As you can see, I already have filled in my email and password in this login form. The contrast in this login form, I didn't use social media but you also can use it as you wanted.
If you're feeling difficulty understanding this program, You can see a tutorial video below and I hope that it will help you as possible.
Login Form using Bootstrap 5|Video Tutorial
Source code
Logo
Create a file name index.html and past this opening HTML block script
<!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">
<title>Bootstrpa loginform</title>
<link rel="stylesheet" href="./style.css">
<link rel="shortcut icon" href="./logo-image.png" type="image/x-icon">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>HTML
<section class="h-100 gradient-form" style="background: #eee;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-xl-10">
<div class="card rounded-3 text-black">
<div class="row g-0">
<div class="col-lg-6">
<div class="card-body p-md-5 mx-md-4">
<div class="text-center">
<img src="./logo-image.png" alt="logo" style="width: 150px; height: 150px;">
<h4>The Flowers</h4>
</div>
<form action="">
<p>Please login to your account</p>
<div class="form-outline mb-4">
<input type="email" id="email" class="form-control"
placeholder="Username">
</div>
<div class="form-outline mb-4">
<input type="password" id="passowrd" class="form-control"
placeholder="Password">
</div>
<div class="text-center pt-1 mb-5 pb-1">
<button type="button" class="btn btn-primary btn-block fa-lg gradient-custom-2 mb-3 w-100">Login</button>
<a href="#" class="text-muted">Forgot password?</a>
</div>
<div class="d-flex align-items-center justify-content-center pb-4">
<p class="mb-0 me-2">
Don't have account?
</p>
<button type="button" class="btn btn-outline-danger">
Create account
</button>
</div>
</form>
</div>
</div>
<div class="col-lg-6 d-flex align-items-center gradient-custom-2">
<div class="text-white px-3 py-4 p-md-5 mx-md-4">
<h4 class="md-4">The Flowers</h4>
<p class="small mb-0">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima accusamus debitis reiciendis earum ducimus voluptate quos distinctio aperiam quod repudiandae nam amet ut atque odio consectetur, deserunt maxime architecto ea.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, assumenda dolorem! Distinctio incidunt fugit, est cumque sunt tempora aspernatur, laborum dolores, perferendis maiores corrupti eaque earum ipsa. Odio, nesciunt nemo!
</p>
<a href="#" class="text-white">Learn more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>CSS Markup
.gradient-custom-2{
background: #fccb90;
background: -webkit-linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593);
background: linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593);
}
@media (min-width: 768px) {
.grandient-form{
height: 100vh !important;
}
}
@media (min-width: 769px) {
.gradient-custom-2{
border-top-right-radius: .3rem;
border-bottom-right-radius: .3rem;
}
}