Introduction
Bootstrap 5 Login Form Example is one of the most common UI patterns for modern websites and apps. In this snippet, you’ll learn how to build a responsive login form with clean design and optional social icons.
Bootstrap 5 Login Form Example Code
<div class="container d-flex justify-content-center align-items-center min-vh-100">
<div class="card p-4 shadow" style="max-width: 400px; width:100%;">
<h3 class="mb-3 text-center">Login</h3>
<form>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary w-100">Login</button>
<div class="text-center mt-3">
<a href="#">Forgot password?</a>
</div>
<hr>
<div class="d-flex justify-content-around">
<button type="button" class="btn btn-outline-primary">Facebook</button>
<button type="button" class="btn btn-outline-danger">Google</button>
</div>
</form>
</div>
</div>
How It Works
This Bootstrap 5 Login Form Example uses a card with form inputs styled using .form-control. Social login buttons are added with btn-outline styles.
Why Use This?
Login forms are required in almost every app. This snippet gives you a professional design that is responsive and easy to customize.
Common Mistake
A common mistake is forgetting to wrap the form in a container with proper alignment classes, causing the form to appear off-center.
Pro Tip
Combine this with .bg-light background or gradient styles to make the login page more appealing.