www.codekit.in
Posted Jul 28, 2025
CodeKit
Download the best responsive login form template built with HTML, CSS, and Bootstrap 4. This free login page design is perfect for websites, admin panels, and authentication systems. Fully responsive layout with modern UI, form validation, and clean code structure. Ideal for beginners and developers in 2025.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Login Form</title>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
<style>
body {
background: #c2e9fb;
background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
color: black;
font-family: 'Rubik', sans-serif !important;
}
.card {
border-radius: 1rem;
}
.btn-primary {
background-color: #003366;
border: none;
}
.btn-primary:hover {
background-color: #00509e;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6 mt-5">
<div class="card shadow">
<div class="card-body" style="font-family: cursive; box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);">
<h4 class="card-title text-center mb-4">Login Form</h4>
<form action="login" method="post">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" value="">
<span class="text-danger"></span>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password">
<span class="text-danger"></span>
<small><a href="#">Forgot password?</a></small>
</div>
<div class="form-group form-check">
<input class="form-check-input" type="checkbox" value="remember-me" name="remember-me" checked="">
<label class="form-check-label">Remember me next time</label>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary btn-block">Login</button>
</div>
</form>
<p class="text-center mt-3">Don't have an account? <a href="#">Register here</a></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
