Bootstrap 5 Login Form
A Bootstrap 5 Login Form is a structured authentication interface built using Bootstrap's form controls, grid system, and utility classes to collect a user's credentials, typically email and password, and submit them securely. It uses components like form-control, form-label, btn, and optionally form-check for remember-me toggles. Use it on any page requiring user authentication, including member portals, SaaS dashboards, e-commerce accounts, and admin panels.
Bootstrap class
No dedicated Bootstrap class
Common use cases
- SaaS application sign-in page where users authenticate before accessing a dashboard with role-based features
- E-commerce account portal allowing returning customers to log in to view orders, saved addresses, and payment methods
- Internal company intranet or admin panel requiring staff credentials before accessing sensitive HR or financial data
- Online learning platform where students and instructors sign in to access course content, grades, and messaging
Variants and classes
| Variant | Description and classes |
|---|---|
| Centred card | Form in a narrow card in the middle of the page.card shadow-sm p-4 mx-auto |
| Floating labels | Labels inside the fields that move up on focus.form-floating + form-control |
| Remember me | Checkbox under the password field.form-check + form-check-input + form-check-label |
| Full-width submit | Primary button that spans the form.btn btn-primary w-100 |
Code example
<div class="container d-flex justify-content-center align-items-center min-vh-100">
<div class="card shadow-sm p-4" style="width: 100%; max-width: 420px;">
<div class="card-body">
<h2 class="card-title mb-1 fw-bold">Welcome back</h2>
<p class="text-muted mb-4">Sign in to your Arcadia account</p>
<form action="/login" method="POST" novalidate>
<div class="mb-3">
<label for="loginEmail" class="form-label">Email address</label>
<input
type="email"
class="form-control"
id="loginEmail"
name="email"
placeholder="you@example.com"
autocomplete="email"
required
/>
</div>
<div class="mb-3">
<label for="loginPassword" class="form-label d-flex justify-content-between">
Password
<a href="/forgot-password" class="text-decoration-none small">Forgot password?</a>
</label>
<input
type="password"
class="form-control"
id="loginPassword"
name="password"
placeholder="Enter your password"
autocomplete="current-password"
required
/>
</div>
<div class="mb-4 form-check">
<input type="checkbox" class="form-check-input" id="rememberMe" name="remember" />
<label class="form-check-label text-muted" for="rememberMe">Keep me signed in</label>
</div>
<button type="submit" class="btn btn-primary w-100">Sign in</button>
</form>
<hr class="my-4" />
<p class="text-center text-muted small mb-0">
Don't have an account? <a href="/register" class="text-decoration-none">Create one</a>
</p>
</div>
</div>
</div>Live examples
Basic Login Form
Canvas template variants
Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:
- Canvas Builder generated login form with custom colours
- Login Form with interactive states
- Responsive login form for all screen sizes
Best practices
Always use autocomplete attributes
Add autocomplete="email" and autocomplete="current-password" to your inputs. This enables browser and password manager autofill, which reduces friction and improves login completion rates measurably.
Add novalidate to the form, validate with JS
Set novalidate on your <form> element and use Bootstrap's built-in validation classes (is-invalid, invalid-feedback) via JavaScript. This gives you full control over error messaging instead of relying on inconsistent native browser tooltips.
Inline the forgot password link inside the label
Using d-flex justify-content-between on the password <label> element lets you place the 'Forgot password?' link inline without breaking label-input association or disrupting the form's visual flow.
Constrain card width with max-width, not Bootstrap columns
Use style="max-width: 420px" directly on the card rather than wrapping in col-md-4. This ensures the form centres correctly at all viewport sizes without the grid introducing unwanted horizontal padding at certain breakpoints.
FAQ
How do I show inline validation errors on a Bootstrap 5 login form?
was-validated class to the <form> element via JavaScript after a submission attempt, or toggle is-invalid on individual inputs programmatically. Pair each input with a sibling <div class="invalid-feedback"> containing the error message, for example, 'Please enter a valid email address.' Bootstrap will show this message automatically when the input carries is-invalid. For server-side errors (e.g. wrong password), add is-invalid to the password input on page render and output the server error inside the invalid-feedback div.How can I customise the login form to match my brand colours?
--bs-btn-bg and --bs-btn-border-color scoped to .btn-primary, or redefine --bs-primary globally. For the focus ring colour on inputs, override --bs-focus-ring-color. If you're using Bootstrap's Sass source, set $primary before importing Bootstrap to propagate your brand colour through buttons, links, and focus states in one step.