Bootstrap 5 – Forms & Controls
Estimated reading: 5 minutes 12 views

📝 Bootstrap 5 – Forms Overview: Build Clean, Responsive Input Interfaces

🧲 Introduction – What Are Forms in Bootstrap 5?

Forms are essential for capturing user input—whether it’s for logins, surveys, search bars, or checkout flows. Bootstrap 5 provides a powerful set of form components, utilities, and layout options to create responsive, accessible, and stylish forms with minimal effort.

🎯 In this guide, you’ll learn:

  • How to structure basic and advanced forms
  • Use input fields, labels, checkboxes, radios, and selects
  • Control layouts with grids and flex utilities
  • Apply validation and accessibility best practices

✅ Example 1 – Basic Bootstrap Form

<form>
  <div class="mb-3">
    <label for="exampleInputEmail" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email">
  </div>

  <div class="mb-3">
    <label for="exampleInputPassword" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

🔍 Code Explanation:

Class/ElementPurpose
.form-labelProperly styles the <label> tag
.form-controlApplies styling to <input>, <textarea>
.mb-3Adds bottom margin spacing
.btn btn-primaryStyled Bootstrap button

✅ Example 2 – Form Layout Using Grid System

<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">
  </div>
  <div class="col-md-6">
    <label for="lastName" class="form-label">Last Name</label>
    <input type="text" class="form-control" id="lastName">
  </div>
</form>
  • Use .row and .col-* for responsive form fields.
  • g-3 adds consistent gutter spacing.

✅ Common Input Types & Controls

ControlClassExample
Text.form-control<input type="text">
Email.form-control<input type="email">
Password.form-control<input type="password">
Textarea.form-control<textarea>
Select.form-select<select>
Checkbox.form-check-input<input type="checkbox">
Radio.form-check-input<input type="radio">
Switch.form-check form-switchToggle switch
File Upload.form-control<input type="file">
Range Slider.form-range<input type="range">

✅ Example 3 – Checkbox and Radio Groups

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="options" id="radio1">
  <label class="form-check-label" for="radio1">Option 1</label>
</div>

✅ Example 4 – Inline Forms

<form class="row row-cols-lg-auto g-3 align-items-center">
  <div class="col-12">
    <label class="visually-hidden" for="inlineFormInput">Name</label>
    <input type="text" class="form-control" id="inlineFormInput" placeholder="Jane Doe">
  </div>

  <div class="col-12">
    <button type="submit" class="btn btn-success">Search</button>
  </div>
</form>
  • Use row-cols and align-items-center for inline alignment.

✅ Example 5 – Form Validation (Client-Side)

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input type="text" class="form-control" id="username" required>
    <div class="invalid-feedback">Username is required.</div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

<script>
  (() => {
    'use strict';
    const forms = document.querySelectorAll('.needs-validation');
    forms.forEach(form => {
      form.addEventListener('submit', event => {
        if (!form.checkValidity()) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  })();
</script>

🛠️ Best Practices for Bootstrap Forms

TipWhy It Matters
Use .form-control on all inputsEnsures consistent UI/UX
Add labels with for + idImproves accessibility
Use form-check for checkboxesProvides proper spacing and alignment
Avoid nesting formsCauses submission issues and validation conflicts
Use aria-* attributes when neededEnhances accessibility for screen readers

📌 Summary – Build Responsive Forms Easily with Bootstrap 5

Bootstrap 5 forms help developers quickly build consistent, accessible, and responsive UI forms using utility classes and grid layout. Whether simple or advanced, forms integrate seamlessly with buttons, inputs, and validation logic.

🔍 Key Takeaways:

  • Structure forms using .form-control, .form-label, and .form-check
  • Layout forms with .row, .col-*, and .g-* spacing
  • Support for input types, selects, switches, and file uploads
  • Client-side validation is simple and customizable
  • Responsive and accessible by default

⚙️ Great for registration pages, contact forms, search bars, admin panels, and login screens.


❓ FAQs – Bootstrap 5 Forms

How do I make a form inline in Bootstrap 5?
✅ Use .row, .row-cols-auto, and .align-items-center for inline forms.


What’s the difference between .form-control and .form-select?
.form-control is for inputs and textareas; .form-select is for dropdowns (<select>).


Can I use Bootstrap form validation without JavaScript?
❌ No. Bootstrap validation styles require a small JS snippet to handle class toggles.


How can I make a checkbox appear like a switch?
✅ Add .form-switch to the .form-check container:

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch">
</div>

Share Now :

Leave a Reply

Your email address will not be published. Required fields are marked *

Share

Bootstrap 5 – Forms Overview

Or Copy Link

CONTENTS
Scroll to Top