We have already designed a simple Login Form and Registration Form using only HTML. In this blog, we will link bootstrap cdn and apply bootstrap classes to see the changes. We are using Bootstrap 5 for this content.
Procedure to get bootstrap CDN
1. Google on "bootstrap 5 cdn".
2. Get into the official website of "https://getbootstrap.com/" s "https://getbootstrap.com/docs/5.0/getting-started/introduction/" page.
3. Copy CSS:- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
JS:- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" ></script>Get it from the site or copy from this blog.Paste the CSS link in the head section, and the JS link all the way down of the design.
Let's apply some bootstrap classes to make our design more attractive and responsive.
Login page
<html>
<head>
<title>Login Form</title>
</head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" >
<style>
.container{
border: 1px solid black;
padding: 50px;
width: fit-content;
margin-top:50px;
}
h3{
text-align: center;
padding-bottom: 10px;
}
</style>
<body>
<div class="container">
<h3>Login Form</h3>
<form method="post">
<div class="row mb-1">
<div class="col-sm">
<label for="">Email Id</label>
</div>
<div class="col-sm">
<input type="email" name="emailid" id="emailid" class="form-control" placeholder="Enter Email Id here">
</div>
</div>
<div class="row mb-1">
<div class="col-sm">
<label for="">Password </label>
</div>
<div class="col-sm">
<input type="password" name="password" id="password" class="form-control" placeholder="Enter Password here">
</div>
</div>
<div class="row mb-1">
<div class="col-sm">
<button type="button" class="btn btn-primary" value="">Login</button>
</div>
<div class="col-sm">
<a href="Register.html">Register here</a>
</div>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" ></script>
</body>
</html>
Registration page
<html>
<head>
<title>Registration Form</title>
</head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" >
<style>
.container{
border: 1px solid black;
padding: 50px;
width: fit-content;
margin-top:50px;
}
h3{
text-align: center;
padding-bottom: 10px;
}
</style>
<body>
<div class="container">
<form method="post">
<h3>Registration Form</h3>
<div class="row mb-1">
<div class="col-sm">
<label for="">Name</label>
</div>
<div class="col-sm">
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your name">
</div>
</div>
<div class="row mb-1">
<div class="col-sm">
<label for="">Email Id</label>
</div>
<div class="col-sm">
<input type="email" name="emailid" id="emailid" class="form-control" placeholder="Enter Email Id here">
</div>
</div>
<div class="row mb-1">
<div class="col-sm">
<label for="">Phone</label>
</div>
<div class="col-sm">
<input type="number" name="phone" id="phone" class="form-control" placeholder="Enter mobile number">
</div>
</div>
<div class="row mb-1">
<div class="col-sm">
<label for="">DOB</label>
</div>
<div class="col-sm">
<input type="date" name="dob" id="dob" class="form-control">
</div>
</div>
<div class="row mb-1">
<div class="col-sm">
<label for="">Gender</label>
</div>
<div class="col-sm">
<input type="radio" name="gender" id="male" value="male">Male
<input type="radio" name="gender" id="female" value="female">Female
</div>
</div>
<div class="row mb-1">
<div class="col-sm">
<label for="">Photo</label>
</div>
<div class="col-sm">
<input type="file" name="phote" id="photo" class="form-control" accept="image/*">
</div>
</div>
<div class="row mb-1">
<div class="col-sm">
<label for="">Country</label>
</div>
<div class="col-sm">
<select name="country" id="country" class="form-control">
<option>Select your country</option>
<option>India</option>
<option>Nepal</option>
<option>Srilanka</option>
<option>USA</option>
<option>UK</option>
<option>Canada</option>
</select>
</div>
</div>
<div class="row mb-1">
<div class="col-sm">
<label for="">Address</label>
</div>
<div class="col-sm">
<textarea name="address" id="address" class="form-control" placeholder="Enter address"></textarea>
</div>
</div>
<div class="row mb-1">
<div class="col-sm">
<input type="submit" class="btn btn-primary" value="Register">
</div>
<div class="col-sm">
Already user?<a href="Login.html">Login here</a>
</div>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" ></script>
</body>
</html>
Happy coding...
Video tutorial coming shortly
