Are you looking to enhance user experience on your website by incorporating a user-friendly login and registration form? Look no further! In this guide, we’ll walk you through the process of creating a stunning Bootstrap login and registration form that not only elevates the visual appeal of your site but also enhances user engagement. Let’s dive in!
Understanding Bootstrap: The Foundation of Modern Web Design
Bootstrap, a popular front-end framework, provides a plethora of pre-designed components that streamline web development. From responsive grids to dynamic forms, Bootstrap simplifies the creation of aesthetically pleasing and highly functional websites.
Designing Your Login and Registration Form
Before delving into the technical aspects, let’s outline the key design considerations for your login and registration form:
- User-Friendly Layout: Craft a clean and intuitive layout that seamlessly integrates the login and registration forms. Ensure that users can easily distinguish between the two.
- Consistent Branding: Maintain consistency with your website’s branding, incorporating relevant colors and fonts to create a cohesive user experience.
- Responsive Design: Bootstrap’s responsive classes will make your form look and function flawlessly across various devices, ensuring an optimal experience for all users.
Step 2: Implementing the Bootstrap Login and Registration Form
To implement the form, follow these steps:
Linking Bootstrap: Begin by linking the Bootstrap CSS and JavaScript files to your HTML document. This can be done by adding the following code to the <head> section of your HTML:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
Creating the Form Structure: Build the form structure using Bootstrap’s classes for forms and input fields. Utilize the grid system to arrange the login and registration components side by side.
Source Code for Bootstrap login and registration form:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<style type="text/css">
*
{
margin: 0;
padding: 0;
font-family: 'Roboto Condensed', sans-serif;
}
body
{
background: url(images/pexels-pixabay-268533.jpg) no-repeat;
background-size: cover;
}
a
{
text-decoration: none !important;
}
label
{
color: #fff;
font-weight: 700;
margin-bottom: 5px;
}
::placeholder
{
color: #fff !important;
font-size: 15px;
}
input:focus
{
background: transparent !important;
}
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="file"]
{
box-shadow: none !important;
border: 1px solid #3fa9ff !important;
border-radius:4px;
background: transparent;
color: #fff !important;
}
input[type="radio"]
{
box-shadow: none !important;
border-radius: 50px;
cursor: pointer;
}
.form-control:disabled
{
background: #fff !important;
}
textarea
{
box-shadow: none !important;
border: 1px solid #4e73df !important;
}
select
{
box-shadow: none !important;
border: 1px solid #4e73df !important;
border-radius: 50px !important;
}
.btn
{
box-shadow: none !important;
outline: none !important;
}
.body-section
{
/* padding: 50px;*/
/* margin-top: 80px;*/
}
.body-section h2
{
padding-bottom: 30px;
font-size: 35px;
color: #fff;
}
.login-section
{
background-color: rgba(0, 0, 0, 0.7);
height: 370px;
/* padding: 20px;*/
border-radius: 10px;
}
.login-section form
{
padding: 10px;
}
.login-section .forgot
{
color: #fff !important;
}
.login-section .nav-tabs
{
border:none !important;
margin-bottom: 19px;
}
.login-section .nav-tabs .nav-link
{
border: none !important;
color: #fff !important;
}
.login-section .nav-tabs .nav-item
{
border: none !important;
padding: 15px 16px;
}
.login-section .nav-tabs .nav-link.active
{
border-top: 2px solid #ff0000 !important;
background: #3fa9ff;
color: #fff !important;
}
</style>
</head>
<body>
<div class="body-section">
<div class="container mt-5">
<div class="row d-flex justify-content-center">
<div class="col-lg-5 col-md-6 col-sm-6 mt-5">
<h2 class="text-center">Login Page</h2>
<div class="login-section">
<nav>
<div class="nav nav-tabs nav-justified" id="nav-tab" role="tablist">
<a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Sign In</a>
<a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Sign Up</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<form>
<div class="mb-3">
<label>User Name</label>
<input type="text" name="" class="form-control" placeholder="Enter Your Name...">
</div>
<div class="mb-3">
<label>Password</label>
<input type="text" name="" class="form-control" placeholder="Enter Your Password...">
</div>
<div class="mb-3 d-flex justify-content-center">
<input type="submit" name="" class="btn btn-info w-100 text-white" value="Login">
</div>
<a href="#" class="float-start forgot" >Forgot Password?</a>
</form>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<form>
<div class="mb-3">
<label>User Email</label>
<input type="text" name="" class="form-control" placeholder="Enter Your Email Address...">
</div>
<div class="mb-3">
<label>User Name</label>
<input type="text" name="" class="form-control" placeholder="Enter Your Name....">
</div>
<div class="mb-3">
<label>Password</label>
<input type="text" name="" class="form-control" placeholder="Enter Your Password....">
</div>
<div class="mb-3 d-flex justify-content-center">
<input type="submit" name="" class="btn btn-info w-100 text-white" value="Sign Up">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Throughout this tutorial, we’ll refer to specific resources to provide you with additional information and context. If you’re interested in deepening your understanding, you can refer to the following articles:
- “Copy text to clipboard” Learn more about creating How to Copy Text to Clipboard using jQuery
Suggestions:Â Dear Programmers, I hope you understand the coding concepts discussed above. You can now easily embed the above functionality into your project. Please leave any comments or questions about this tutorial in the section below. You can also suggest web development-related topics.
