Bootstrap 5 registration forms collect new user information. This page covers 4 signup form patterns — basic, card, multi-step and social login — each with working copy-paste HTML.
Quick Setup
Registration forms need only Bootstrap 5 CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
Key Classes Reference
| Class | What It Does |
|---|---|
.form-control | Styles all input fields |
.form-label | Label above each input |
.form-check | Wrapper for checkbox inputs |
.form-text | Helper text below an input |
.row g-3 | Grid layout with gap for form fields |
.was-validated | Triggers validation styles on form |
.invalid-feedback | Error message for invalid inputs |
.valid-feedback | Success message for valid inputs |
.col-sm-6 | Two equal columns for name fields |
.w-100 | Full width submit button |
1. Basic Bootstrap 5 Registration Form
A clean registration form with name, email, password and confirm password fields.
2. Bootstrap 5 Registration Form in Card
Registration form in a card with brand header and validation styling.
3. Bootstrap 5 Multi-Step Registration Form
A two-step registration form with progress indicator. Step 1 collects account details, step 2 collects profile info.
Frequently Asked Questions
Add novalidate to the form element and required to each input. On form submit, add was-validated class to the form: form.classList.add('was-validated'). Bootstrap automatically shows green valid or red invalid styles. Use invalid-feedback divs for custom error messages.
Create separate div sections for each step. Show one at a time using d-none and d-block utility classes. Use a Next button to hide the current step and show the next. Track the current step in a JavaScript variable and update a progress indicator accordingly.
Add a progress bar below the password input. Listen to the input event on the password field and calculate strength based on length, uppercase, numbers and symbols. Update the progress bar width and color (bg-danger, bg-warning, bg-success) based on the score.
Disable the submit button after first click: button.disabled = true. Or add a loading spinner inside the button. Re-enable it only if validation fails or the server returns an error. This prevents users from clicking multiple times.
Use the form-check component: <div class='form-check'><input class='form-check-input' type='checkbox' required id='terms'><label class='form-check-label' for='terms'>I agree to terms</label></div>. Add required attribute so the form won't submit without it being checked.
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.
4. Bootstrap 5 Social Registration Form
Sign up with Google or GitHub buttons plus a traditional email form below.