1. Basic Form Structure

• Every form element in Bootstrap must be wrapped inside a <form> tag.

• Use Bootstrap’s built-in classes to style input fields, labels, and buttons.

👉 Example: Basic Form Structure

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

✅ Explanation:

• .form-label styles the label.

• .form-control makes input fields responsive and well-styled.

• .btn-primary adds a styled submit button.

2. Form Layouts

A. Vertical Form (Default)

• Inputs are stacked on top of each other (default layout).

👉 Example: Vertical Form

<form>
  <div class="mb-3">
    <label class="form-label">Full Name</label>
    <input type="text" class="form-control" placeholder="Enter your name">
  </div>
  <button type="submit" class="btn btn-success">Submit</button>
</form>

B. Horizontal Form

• Use the .row and .col classes to align labels and inputs in a horizontal layout.

👉 Example: Horizontal Form

<form>
  <div class="row mb-3">
    <label class="col-sm-2 col-form-label">Username</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" placeholder="Enter username">
    </div>
  </div>
  <button type="submit" class="btn btn-warning">Submit</button>
</form>

✅ Explanation:

• .col-sm-2 defines the width of the label.

• .col-sm-10 sets the input field width.

C. Inline Form

• Use .row and .col-auto to keep form fields on a single line.

👉 Example: Inline Form

<form class="row g-3">
  <div class="col-auto">
    <input type="text" class="form-control" placeholder="Enter name">
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-info">Search</button>
  </div>
</form>

3. Different Input Types

Bootstrap supports various input types like text, email, password, number, file, and more.

👉 Example: Various Input Types

<form>
  <input type="text" class="form-control mb-2" placeholder="Text input">
  <input type="email" class="form-control mb-2" placeholder="Email input">
  <input type="password" class="form-control mb-2" placeholder="Password input">
  <input type="number" class="form-control mb-2" placeholder="Number input">
  <input type="file" class="form-control mb-2">
</form>

4. Input Groups (Prepend & Append)

• Add icons, text, or buttons inside input fields using .input-group.

👉 Example: Input with Icons & Buttons

<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">
  <button class="btn btn-outline-secondary">Send</button>
</div>

5. Checkboxes & Radio Buttons

• Bootstrap provides custom checkboxes and radio buttons.

👉 Example: Checkboxes & Radio Buttons

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="check1">
  <label class="form-check-label" for="check1">Accept Terms</label>
</div>

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

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

6. Form Validation

• Bootstrap provides built-in validation feedback messages.

👉 Example: Form Validation

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label class="form-label">Email</label>
    <input type="email" class="form-control is-invalid" required>
    <div class="invalid-feedback">Please enter a valid email.</div>
  </div>
  <button type="submit" class="btn btn-danger">Submit</button>
</form>

✅ Explanation:

• .is-invalid marks an invalid input field.

• .invalid-feedback displays error messages.

Conclusion

Bootstrap’s Forms & Inputs system simplifies form creation with a variety of styles, layouts, and validation options. Using .form-control, .input-group, and .form-check, you can create responsive and user-friendly forms efficiently. 🚀