Bootstrap 5Forms

Bootstrap 5 Forms

Bootstrap 5 provides a comprehensive form styling system including inputs, selects, checkboxes, radios, range sliders, file inputs, floating labels, and input groups. Bootstrap 5 also includes client-side form validation feedback styling using native HTML5 validation and custom JavaScript.

Primary Class

.form-control / .form-select / .form-check

Common Use Cases

→Contact forms
→Newsletter signup
→Login/registration forms
→Search inputs
→Multi-step checkout
→Filter/search forms
→Survey and quiz forms

Variants & Classes

Variant	Description	Classes
Basic form	Stacked label and input pairs.	`mb-3 + label.form-label + input.form-control`
Floating labels	Labels animate above the input on focus/fill.	`form-floating + input.form-control + label`
Input groups	Prepend or append icons, text, or buttons.	`input-group + input-group-text + input.form-control`
Inline form	All form elements in a horizontal row.	`row g-3 align-items-center`
Validated form	Green/red feedback after submission attempt.	`was-validated class on form + valid-feedback/invalid-feedback`

Code Example

<form class="needs-validation" novalidate>
  <div class="row g-3">
    <div class="col-md-6">
      <div class="form-floating">
        <input type="text" class="form-control" id="firstName" placeholder="First name" required>
        <label for="firstName">First name</label>
        <div class="invalid-feedback">Please enter your first name.</div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-floating">
        <input type="email" class="form-control" id="email" placeholder="Email address" required>
        <label for="email">Email address</label>
        <div class="invalid-feedback">Please enter a valid email.</div>
      </div>
    </div>
    <div class="col-12">
      <div class="form-floating">
        <textarea class="form-control" id="message" style="height:120px" placeholder="Message" required></textarea>
        <label for="message">Message</label>
      </div>
    </div>
    <div class="col-12">
      <button class="btn btn-primary px-5" type="submit">Send Message</button>
    </div>
  </div>
</form>

Canvas Framework Variants

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

✓Multi-step form with progress indicator
✓Dark themed form for hero section
✓Inline search form with button append
✓Subscription form with checkbox consent
✓Contact form with icon input groups

Best Practices

Use floating labels for modern, space-efficient forms

Bootstrap 5's floating labels (introduced in BS5) animate the label above the input on focus, saving vertical space while maintaining label visibility. More modern than traditional stacked labels.

Always add novalidate to custom validated forms

If you're using Bootstrap's JavaScript validation (toggling was-validated class), add novalidate to the form element to prevent native browser validation UI from conflicting with Bootstrap's custom styles.

Associate labels with inputs using for/id

Every label must have a for attribute matching the input's id. This is required for accessibility (screen readers) and enables clicking the label to focus the input.

FAQ

How do I implement Bootstrap 5 form validation?

Add novalidate to the form, then on submit: if form.checkValidity() is false, preventDefault() and add the was-validated class to the form. Bootstrap will show red/green validation feedback on all fields automatically.

What is the difference between form-control and form-select?

form-control styles text inputs, textareas, and file inputs. form-select styles the native <select> element with Bootstrap's custom dropdown appearance.