Bootstrap - Bootstrap 5 Forms

Bootstrap 5 provides a powerful, responsive, and user-friendly framework for creating forms in web applications. It comes with prebuilt CSS classes, JavaScript plugins, and utility classes that make designing forms faster and more consistent.

1. Basic Structure of Bootstrap 5 Forms

Bootstrap forms are built using HTML’s <form> element but styled with Bootstrap’s built-in classes. The main classes are:

  • .form-control → For input fields, textareas, and selects

  • .form-label → For labels

  • .form-text → For helper or hint text below inputs

  • .form-check → For checkboxes and radio buttons

  • .form-select → For dropdowns

  • .form-floating → For floating labels

Example: Basic Form

<form>
  <div class="mb-3">
    <label for="name" class="form-label">Full Name</label>
    <input type="text" class="form-control" id="name" placeholder="Enter your name">
  </div>
  
  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="[email protected]">
    <div class="form-text">We'll never share your email with anyone else.</div>
  </div>
  
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password">
  </div>
  
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

2. Form Controls

Bootstrap 5 provides various styled input elements.

a) Text Inputs

<input type="text" class="form-control" placeholder="Enter name">

  • Automatically styled with padding, borders, and responsive widths.

b) Textarea

<textarea class="form-control" rows="3"></textarea>

  • For multi-line inputs.

c) Select Dropdowns

<select class="form-select">
  <option selected>Select your city</option>
  <option value="1">New York</option>
  <option value="2">London</option>
  <option value="3">Tokyo</option>
</select>

  • .form-select replaces .custom-select from Bootstrap 4.

d) Checkboxes and Radio Buttons

Bootstrap 5 uses .form-check for better alignment and spacing.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Accept Terms & Conditions
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="gender" id="male">
  <label class="form-check-label" for="male">Male</label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="gender" id="female">
  <label class="form-check-label" for="female">Female</label>
</div>

3. Form Layouts

Bootstrap 5 offers three main layouts for forms:

a) Vertical Form (Default)

  • Fields are stacked on top of each other.

  • Example: The basic form above.

b) Horizontal Form

  • Labels and inputs are placed side by side using the Grid System.

<form>
  <div class="row mb-3">
    <label for="name" class="col-sm-2 col-form-label">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="name">
    </div>
  </div>

  <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">
    </div>
  </div>

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

c) Inline Forms

  • Form fields are displayed horizontally in a single line.

  • Use .row or .d-flex utilities.

<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">
    <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
    <select class="form-select" id="inlineFormSelectPref">
      <option selected>Choose...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
    </select>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</form>

4. Form Validation

Bootstrap 5 comes with built-in client-side validation styles.
Use .was-validated along with .is-valid and .is-invalid.

<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4">
    <label for="validationCustom01" class="form-label">First name</label>
    <input type="text" class="form-control" id="validationCustom01" required>
    <div class="valid-feedback">
      Looks good!
    </div>
    <div class="invalid-feedback">
      Please provide your first name.
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>

How it works:

  • novalidate disables the browser’s default validation.

  • .needs-validation enables Bootstrap’s validation styles.

  • .valid-feedback and .invalid-feedback show messages dynamically.

5. Floating Labels

Bootstrap 5 introduced floating labels to make forms cleaner.

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">Email address</label>
</div>

<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>

6. Input Groups

Use input groups when you want to add text, icons, or buttons inside inputs.

<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username">
  <span class="input-group-text">@gmail.com</span>
</div>

<div class="input-group">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control" placeholder="Amount">
  <span class="input-group-text">.00</span>
</div>

7. File Uploads

Bootstrap 5 simplifies file inputs with .form-control.

<div class="mb-3">
  <label for="formFile" class="form-label">Upload your file</label>
  <input class="form-control" type="file" id="formFile">
</div>

8. Sizing & Spacing in Forms

  • Small Inputs: .form-control-sm

  • Large Inputs: .form-control-lg

  • Spacing: .mb-3, .mt-2, .px-3, etc.

<input type="text" class="form-control form-control-sm" placeholder="Small input">
<input type="text" class="form-control form-control-lg" placeholder="Large input">

9. Utility Classes for Forms

Bootstrap 5 includes utilities to quickly customize form layouts:

  • Alignment: .d-flex, .justify-content-between

  • Width control: .w-25, .w-50, .w-100

  • Visibility: .visually-hidden for hidden labels in inline forms.

10. Key Differences from Bootstrap 4

Feature Bootstrap 4 Bootstrap 5
.form-group Required Removed
.custom-* classes Used Replaced with .form-*
Floating labels Not available Introduced
jQuery dependency Required Removed
Validation Improved in v5 More flexible

 

Bootstrap 5 forms are:

  • Responsive → Work across all screen sizes.

  • Customizable → Easy to style and modify.

  • User-friendly → Built-in floating labels, validation, input groups, etc.

  • Modern → Cleaner syntax compared to Bootstrap 4.