1. Form Structure

Bootstrap 5 uses simple classes for layout and spacing:

• .form-control → standard input styling

• .form-label → for <label> elements

• .mb-3 → margin bottom spacing between fields

Example: Basic Form

<form>
  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="Enter email">
  </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>

2. Form Layouts

a) Vertical (default)

• Fields stack on top of each other

• Use .mb-3 for spacing

b) Horizontal

• Label and input in one row

• Use .row + .col-* classes

<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">
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

c) Inline Forms

• All fields in one line

• Use .d-flex + spacing utilities (me-2)

<form class="d-flex">
  <input class="form-control me-2" type="search" placeholder="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>

3. Form Controls

Bootstrap supports multiple input types:

• Text, email, password, number, URL, search

• Textarea → .form-control

• Select → .form-select

• Checkboxes → .form-check-input inside .form-check

• Radio buttons → .form-check-input inside .form-check

Example: Checkbox

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

4. Floating Labels

• New in Bootstrap 5

• Label floats above input when user types

• Use .form-floating wrapper

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

5. Validation

Bootstrap 5 uses HTML5 validation with classes:

• .is-valid → green border and success feedback

• .is-invalid → red border and error feedback

a) Client-Side Example

<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">
      Please enter a username.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

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

• .needs-validation triggers custom Bootstrap validation styling

• .was-validated applies success/error borders after submit attempt

6. Tips & Best Practices

1. Use required, type="email", minlength, etc., for native validation.

2. Floating labels look modern but don’t mix with placeholders.

3. Use .form-text for small helper text below inputs.

4. Responsive forms: Combine .row + .col-md-* for better layouts on tablets/desktops.

5. Avoid excessive custom CSS — Bootstrap utilities cover most styling.

Summary:

• .form-control, .form-label, .form-check are your core building blocks.

• Layouts: vertical, horizontal, inline

• Floating labels add a modern touch.

• Validation: HTML5 + Bootstrap .is-valid / .is-invalid classes.

• Use responsive utilities and spacing classes for clean, mobile-first forms.