chapter 5: Forms & Validation

Bootstrap even makes it super easy to build forms with the .form-control class that applies modern styling, padding and focus effects to input controls. To layout fields developers can use the custom .mb-3 class to add equal vertical space, or the built-in Bootstrap grid system to display 2 columns of forms fields side-by-side. More than just the visuals, Bootstrap has a comprehensive validation style system that displays instant user feedback on the validity of form fields. Once you add the .needs-validation class to a form you can then display the green “success” or red “danger” messages to the right of the form controls, as soon as the user tries to submit by adding the .valid-feedback and .invalid-feedback classes.

1. The Building Blocks

To create a standard Bootstrap form, you primarily use three classes:

.form-label: Added to <label> tags to ensure proper spacing and font weight.
.form-control: Added to <input>, <textarea>, and <select> tags. it makes them 100% wide, adds rounded corners, and provides a smooth glow when clicked.
.mb-3: A “margin-bottom” utility used on a wrapper <div> to keep form fields from touching each other.

2. Layout Options

Bootstrap uses its grid system to help you arrange forms:

Default: Stacked vertically (one field per line).
Grid: Use .row and .col to put fields side-by-side (e.g., First Name and Last Name).
Inline: Use with a value ofautoor utilities that you prefer, such as, etc., for all elements to size to an equal width.

3. Form Validation

Validation tells the user if they filled out the form correctly (e.g., “Email is required”). Bootstrap uses two main approaches:

Browser Default (The Simple Way)

By adding the HTML5 attribute required to an input, the browser will stop the user from submitting if the field is empty.

Custom Bootstrap Styles (The Pretty Way)

To use Bootstrap’s green (success) and red (danger) styles, you follow these steps:

Add the .needs-validation class and novalidate attribute to your <form>.
Add Feedback Messages right below your input:
- .valid-feedback: Text that appears when the input is correct (Green).
- .invalid-feedback: Text that appears when there is an error (Red).
The Trigger: When a user clicks “Submit,” a tiny bit of JavaScript adds the class .was-validated to the form, which instantly reveals the colors and icons.

4. Simple Example

HTML

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label class="form-label">Email address</label>
    <input type="email" class="form-control" required>
    <div class="invalid-feedback">Please enter a valid email.</div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>