Form Layouts in Bootstrap

Bootstrap offers flexible and responsive form layouts, enabling you to structure forms in various ways. There are three main form layouts: vertical, horizontal, and inline forms.

1. Vertical Form Layout (Default)

This is the default form layout in Bootstrap where form fields are stacked vertically with labels above the inputs.

Example of vertical form layout:

<form>
  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="name@example.com">
  </div>
  
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
  </div>
  
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

• .mb-3: Adds margin to the form group, ensuring proper spacing between input fields.
• Each input is full-width by default and stacked on top of each other.

2. Horizontal Form Layout

In a horizontal form, labels and form controls are displayed side by side, making the form more compact. You use the .row class to create a grid and the .col-* classes to control the width of labels and inputs.

Example of horizontal form layout:

<form>
  <div class="row mb-3">
    <label for="email" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="name@example.com">
    </div>
  </div>
  
  <div class="row mb-3">
    <label for="password" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="password" placeholder="Password">
    </div>
  </div>
  
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

• The form is divided into rows using the .row class.
• Labels and inputs are divided using .col-sm-* classes, controlling how much space each element takes.

3. Inline Form Layout

An inline form allows form controls to sit side by side in a single row, making the form compact and efficient for situations like search bars or quick inputs.

Example of inline form layout:

<form class="row g-3">
  <div class="col-auto">
    <label for="email" class="visually-hidden">Email</label>
    <input type="email" class="form-control" id="email" placeholder="Email">
  </div>
  <div class="col-auto">
    <label for="password" class="visually-hidden">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

• .row g-3: Adds some gutter spacing between form controls.
• .visually-hidden: Hides labels visually but keeps them accessible to screen readers.

Form Validation in Bootstrap

Bootstrap provides built-in form validation using classes like .is-valid and .is-invalid to visually indicate the state of form controls, as well as validation feedback.

1. Custom Form Validation

Bootstrap can handle both client-side and server-side validation. For custom client-side validation, you'll need to add JavaScript to handle the validation logic, applying appropriate classes like .is-valid and .is-invalid.

Example of custom validation:

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="validationEmail" class="form-label">Email</label>
    <input type="email" class="form-control" id="validationEmail" required>
    <div class="invalid-feedback">Please enter a valid email.</div>
    <div class="valid-feedback">Looks good!</div>
  </div>
  
  <div class="mb-3">
    <label for="validationPassword" class="form-label">Password</label>
    <input type="password" class="form-control is-invalid" id="validationPassword" required>
    <div class="invalid-feedback">Password is required.</div>
  </div>
  
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

• .needs-validation: A custom class used to apply validation styles.
• novalidate: This disables the default browser validation, allowing you to use custom Bootstrap validation.
• .is-valid and .is-invalid: These classes apply green borders for valid inputs and red borders for invalid inputs.

2. Server-Side Validation

For server-side validation, you can apply the .is-valid or .is-invalid classes dynamically based on validation results from your server.

Example of server-side validation:

<form method="post" action="/login">
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control is-valid" id="email" value="name@example.com">
    <div class="valid-feedback">Looks good!</div>
  </div>
  
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control is-invalid" id="password">
    <div class="invalid-feedback">Password is required.</div>
  </div>
  
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

In this example, the input field for email has been validated successfully with the .is-valid class applied, while the password field is invalid with the .is-invalid class.

3. Validation Feedback

Bootstrap provides classes to display validation feedback messages:

• .valid-feedback: Displayed when the input is valid.
• .invalid-feedback: Displayed when the input is invalid.

4. Supported Input Types for Validation

Bootstrap validation works on various input types, such as:

• text, email, password
• radio, checkbox
• select
• textarea

Example of validation with radio buttons and checkboxes:

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">Agree to terms and conditions</label>
      <div class="invalid-feedback">You must agree before submitting.</div>
    </div>
  </div>
  
  <div class="mb-3">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

• .form-check: Used to style checkboxes and radio buttons.
• .is-invalid: Applied to make the checkbox appear invalid.

JavaScript Validation Example

To enable client-side form validation, you need to add JavaScript that checks form validity and adds or removes the appropriate classes.

Example of JavaScript for client-side validation:

<script>
  // JavaScript for disabling form submissions if there are invalid fields
  (function () {
    'use strict';
    var forms = document.querySelectorAll('.needs-validation');

    Array.prototype.slice.call(forms).forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault();
          event.stopPropagation();
        }

        form.classList.add('was-validated');
      }, false);
    });
  })();
</script>

Summary of Form Layouts and Validation in Bootstrap:

• Vertical Forms: Stack form controls and labels vertically (default).
• Horizontal Forms: Labels and form controls are displayed side by side with the help of the Bootstrap grid system.
• Inline Forms: Displays form controls inline, making compact forms.
• Validation: Use .is-valid and .is-invalid classes for validation. Add validation feedback using .valid-feedback and .invalid-feedback.
• Client-side validation: Requires custom JavaScript to trigger validation states dynamically.
• Server-side validation: Apply validation classes dynamically based on the server's response.