Bootstrap 5Forms

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.

Primary Class

.login-form

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 & Classes

Variant	Description	Classes
Login Form Default	Standard login form with Bootstrap's default styling.	`login-form`
Login Form Responsive	Responsive variant that adapts to different screen sizes.	`login-form login-form-responsive`

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="[email protected]"
            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

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓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?

Add the `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?

Override Bootstrap's CSS custom properties in your stylesheet. For example, change the primary button colour with `--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.

How does Canvas Builder generate a login form component?

When you describe a login form in Canvas Builder, it generates a fully structured Bootstrap 5 HTML block — including correctly associated labels, input IDs, autocomplete attributes, a remember-me checkbox, and a forgot-password link. It applies your project's brand colours to the submit button and card styling automatically, and the output is mobile-responsive by default using Bootstrap's flexbox utilities and max-width constraints.