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

ClassWhat It Does
.min-vh-100Full viewport height
.d-flex.align-items-centerVertical centering
.form-floatingAnimated floating label
.input-groupAttach button to input
.form-checkCheckbox 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.

Related Components