Responsive Login Form Using Bootstrap 3

Learn how to create a responsive login form using HTML, CSS, and Bootstrap 3.

Responsive Login Form Using Bootstrap 3

Responsive Login Form Using HTML, CSS & Bootstrap 3

This Responsive Login Form is built using HTML, CSS, and Bootstrap 3 to create a clean and professional authentication interface. The design focuses on simplicity, usability, and responsiveness, ensuring a seamless login experience across different screen sizes and devices.

The project uses Bootstrap 3's responsive grid system along with custom CSS styling to create a modern sign-in form layout. The form is optimized for desktops, tablets, and mobile devices, making it suitable for business websites, web applications, and personal projects.

Steps to Create a Responsive Login Form

Follow these simple steps to build a professional sign-in form:

Create a project folder, for example, responsive-login-form-bootstrap-3.
Inside the folder, create three files: index.html, style.css.
Design the login form structure using HTML.
Integrate Bootstrap 3 to create a responsive layout.
Add form fields such as email, username, and password.

                            
                                <!DOCTYPE html>
<!-- TheProviders ----------------- youtube.com/@TheProvidersOfficial -->
<html>
<head>
	<title>Login Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<body>

<div class="container">

	<div class="col-md-4"></div>



	<div class="col-md-4" id="ppp">
		<form>
		<br>
		<img src="avatar.png" style="height: 130px;width: 130px;"><br><br><br>
    <p style="text-align:start;">Email</p>
	<input type="text" name="username" placeholder="Username" required="" class="form-control">
<br>
<p style="text-align:start;">Password</p>
<input type="Password" name="Password" placeholder="Password" required="" class="form-control">
<br>
<div class="row">
	<div class="col-md-6">

</div>
<div class="col-md-6">
<a href="#">Forget password?</a>
</div>
</div>
<br>
<button class="btn btn-info">Login</button>
<br><br>
<div class="row">
	<div class="col-md-4 col-sm-4 col-xs-4"></div>
	<div class="col-md-4 col-sm-4 col-xs-4">
<ul class="list-unstyled">
	<li><a href="#"><i class="fab fa-facebook" ></i></a> </li>
	<li><a href="#"><i class="fab fa-google-plus"></i></a> </li>
	
</ul>

</div>

<div class="col-md-4 col-sm-4 col-xs-4"></div>
</div>


</form>
<br>	
	</div>



	<div class="col-md-4"></div>
</div>




</body>
</html>

Apply custom CSS styling to enhance the appearance of the form. Customize buttons, inputs, and spacing for a modern user experience. Test the form on different screen sizes to ensure full responsiveness. Save the files and open the project in a browser to view the final result.

                            
                                <style>
body{
	background-color: #3178eb;
}
.container{
	margin-top: 80px;	
	text-align: center;
	
}
#ppp{
	background-color: white;
	border-radius: 25px;
}
p{
      font-weight: bold;
}
input[type=text] ,input[type=Password]{
    border-radius: 50px;
    height: 39px;	
}

input[type=text]:focus  ,input[type=Password]:focus{
    box-shadow: none; 
}
input[type=checkbox]{
}
.btn-info{	
  background-color: #3178eb;
  width: 85%;
  border-radius: 18px;
  height: 40px;	
}
ul li{
	float: left;
	font-size: 35px;
	padding-left: 10px;
}
ul li a{
	transition: 0.5s ease;
   
}

</style>

Download Code Files