Bootstrap 5 login pages. This page covers 4 complete login page patterns — basic, floating labels, split layout and dark theme — each with full HTML ready to drop in.
Quick Setup
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
Key Classes Reference
| Class | What It Does |
|---|---|
.min-vh-100 | Full viewport height |
.d-flex.align-items-center | Vertical centering |
.form-floating | Animated floating label |
.input-group | Attach button to input |
.form-check | Checkbox with label |
1. Basic Bootstrap 5 Login Page
Clean centered login card with email, password and remember me.
2. Bootstrap 5 Login with Floating Labels
Modern login form using Bootstrap 5 floating labels and password visibility toggle.
3. Bootstrap 5 Split Layout Login
Two-column login page with branding panel on the left and form on the right.
4. Bootstrap 5 Dark Login Page
Dark themed login page — perfect for admin panels and developer tools.
Frequently Asked Questions
Use min-vh-100 d-flex align-items-center on the outer container: <div class='min-vh-100 d-flex align-items-center justify-content-center'>. This makes the container full viewport height and centers the login card both horizontally and vertically.
Wrap the password input in an input-group with a button that toggles the type attribute: <button onclick="var i=document.getElementById('pwd');i.type=i.type==='password'?'text':'password'">. The button shares the input-group border.
Add a button below the form with d-flex align-items-center gap-2 and an inline SVG Google logo. Style with btn btn-outline-secondary. Handle the click with your OAuth library (Firebase, NextAuth, etc).
Add novalidate to the form, required to inputs, and on submit call form.checkValidity(). Add was-validated class to the form to show Bootstrap's built-in valid/invalid states. For real validation use JavaScript to check values before submitting to your API.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.