← Back to Curriculum

Bootstrap Forms

📚 Lesson 5 of 15 ⏱️ 40 min

Bootstrap Forms

40 min

Bootstrap provides comprehensive form styling that makes creating beautiful, accessible forms straightforward. All form controls receive consistent styling through the `.form-control` class, which applies proper sizing, borders, focus states, and transitions. Bootstrap forms are designed to work seamlessly with HTML5 form validation, providing visual feedback for valid and invalid inputs.

Form layouts can be customized using Bootstrap's grid system, allowing you to create multi-column forms that adapt to different screen sizes. The `.row` and `.col-*` classes work perfectly with forms, enabling responsive form layouts. Bootstrap also provides form groups (`.form-group` or the newer `.mb-3` spacing utility) to properly space form elements and labels.

Bootstrap supports all standard form controls including text inputs, textareas, selects, checkboxes, radio buttons, file inputs, and range sliders. Each control type has proper styling and can be enhanced with additional classes. For example, `.form-control-lg` and `.form-control-sm` adjust input sizes, while `.form-select` provides styled select dropdowns.

Form validation is built into Bootstrap with visual feedback classes. The `.is-valid` and `.is-invalid` classes provide green and red styling respectively, while `.valid-feedback` and `.invalid-feedback` display helpful messages. Bootstrap's validation works with HTML5 validation attributes like `required`, `pattern`, and custom JavaScript validation.

Checkboxes and radio buttons receive special styling through `.form-check` containers. These components can be arranged inline using `.form-check-inline` or stacked vertically. Bootstrap also provides switch-style checkboxes using `.form-switch` for a more modern toggle appearance.

Input groups allow you to add text, buttons, or icons to the beginning or end of form controls, creating more sophisticated input interfaces. Floating labels provide a modern alternative to traditional labels, where the label animates above the input when focused or filled. These advanced features enable you to create professional, polished forms that enhance user experience.

Key Concepts

  • Form controls use .form-control class for consistent styling.
  • Forms integrate with Bootstrap's grid system for responsive layouts.
  • Validation states provide visual feedback for form inputs.
  • Checkboxes and radios use .form-check containers.
  • Input groups and floating labels enhance form functionality.

Learning Objectives

Master

  • Creating styled forms with various input types
  • Implementing form validation with visual feedback
  • Using form layouts with Bootstrap grid system
  • Working with checkboxes, radios, and select elements

Develop

  • Designing user-friendly form interfaces
  • Understanding form accessibility best practices
  • Creating responsive form layouts

Tips

  • Always pair labels with inputs using the 'for' attribute matching input 'id'.
  • Use .form-label for proper label styling and spacing.
  • Combine forms with grid: <div class="row g-3"> for multi-column layouts.
  • Use .form-text for helper text below form controls.

Common Pitfalls

  • Forgetting to include labels, causing accessibility issues.
  • Not using proper form structure, breaking validation styling.
  • Mixing old .form-group with new spacing utilities inconsistently.
  • Not testing forms on mobile devices, missing responsive issues.

Summary

  • Bootstrap provides comprehensive form styling and components.
  • Forms integrate with grid system for responsive layouts.
  • Validation states provide visual feedback for user input.
  • Bootstrap forms are accessible and mobile-friendly.

Exercise

Create a contact form with different input types, validation states, and proper styling.

<form class="row g-3">
  <div class="col-md-6">
    <label for="firstName" class="form-label">First name</label>
    <input type="text" class="form-control" id="firstName" required>
  </div>
  <div class="col-md-6">
    <label for="lastName" class="form-label">Last name</label>
    <input type="text" class="form-control" id="lastName" required>
  </div>
  <div class="col-12">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" required>
    <div class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="col-12">
    <label for="message" class="form-label">Message</label>
    <textarea class="form-control" id="message" rows="3"></textarea>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="newsletter">
      <label class="form-check-label" for="newsletter">
        Subscribe to newsletter
      </label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

Exercise Tips

  • Add validation classes: is-valid or is-invalid for visual feedback.
  • Try floating labels: <div class="form-floating"><input>...</div>.
  • Use input groups: <div class="input-group"><span class="input-group-text">@</span><input></div>.
  • Experiment with form sizes: form-control-lg or form-control-sm.

Code Editor

Output