In Bootstrap, form controls like input fields, select dropdowns, and text areas are styled to look consistent and attractive across all browsers. Bootstrap makes it easy to work with forms by providing custom classes and built-in styles for different types of form controls, as well as options for validation, sizing, and layout.

1. Basic Input

Bootstrap uses the .form-control class to style various input elements such as text fields, email fields, and password fields. This class makes the input field responsive and provides consistent padding and border styles.

Example of basic input:

<form>
  <div class="mb-3">
    <label for="exampleInput" class="form-label">Text Input</label>
    <input type="text" class="form-control" id="exampleInput" placeholder="Enter text">
  </div>
</form>

• The .form-control class applies to most input types like text, email, password, number, etc.
• The .form-label class is used to style the label of the form control.

2. Select Dropdown

Bootstrap provides a custom-styled <select> dropdown using the .form-select class. This class ensures consistent styling with other form controls.

Example of select dropdown:

<form>
  <div class="mb-3">
    <label for="exampleSelect" class="form-label">Select Dropdown</label>
    <select class="form-select" id="exampleSelect">
      <option selected>Open this select menu</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  </div>
</form>

• Use the .form-select class for dropdowns to apply Bootstrap's consistent styling.
• The .form-label class is used for the label of the select dropdown.

3. Textarea

For multi-line text input, Bootstrap provides the <textarea> element styled with the .form-control class, ensuring it matches the look and feel of other form controls.

Example of textarea:

<form>
  <div class="mb-3">
    <label for="exampleTextarea" class="form-label">Textarea</label>
    <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
  </div>
</form>

• The .form-control class is applied to the <textarea> to ensure consistency.
• You can control the number of rows displayed using the rows attribute.

4. Form Control Sizing

Bootstrap allows you to control the size of form controls using .form-control-sm and .form-control-lg for small and large input fields, respectively.

Example of small and large inputs:

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

• Small Input: Use .form-control-sm for smaller input fields.
• Large Input: Use .form-control-lg for larger input fields.

5. Form Control States

Bootstrap offers classes to modify the state of form controls:

• Disabled Inputs: Use the disabled attribute or .disabled class to make the input uneditable.
• Read-only Inputs: Add the readonly attribute for inputs that should be visible but not editable.

Example of disabled and read-only inputs:

<form>
  <div class="mb-3">
    <input type="text" class="form-control" placeholder="Disabled input" disabled>
  </div>
  <div class="mb-3">
    <input type="text" class="form-control" placeholder="Read-only input" readonly>
  </div>
</form>

6. Validation Styles

Bootstrap provides built-in validation styles for input fields using classes like .is-valid and .is-invalid. You can apply these classes to indicate the validation state.

Example of validation:

<form>
  <div class="mb-3">
    <label for="validationInput" class="form-label">Validated Input</label>
    <input type="text" class="form-control is-valid" id="validationInput" placeholder="Valid input">
    <div class="valid-feedback">Looks good!</div>
  </div>
  
  <div class="mb-3">
    <input type="text" class="form-control is-invalid" placeholder="Invalid input">
    <div class="invalid-feedback">Please enter a valid value.</div>
  </div>
</form>

• .is-valid: Applies valid styling (green border).
• .is-invalid: Applies invalid styling (red border).
• .valid-feedback and .invalid-feedback: Add custom validation messages for users.

7. File Input

Bootstrap allows you to style file input fields with the .form-control class. Use the type="file" attribute for file uploads.

Example of file input:

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

• You can also use .form-control-sm or .form-control-lg to adjust the size of the file input.

8. Form Layouts

Bootstrap supports different form layouts for positioning form controls:

• Horizontal Forms: Use the .row class and .col-* classes to align labels and inputs horizontally.

Example of horizontal form layout:

<form>
  <div class="row mb-3">
    <label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail">
    </div>
  </div>
  
  <div class="row mb-3">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>
</form>

9. Floating Labels

Bootstrap allows you to use floating labels, which move above the input when the user starts typing. This feature is available using the .form-floating class.

Example of floating labels:

<form>
  <div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
    <label for="floatingInput">Email address</label>
  </div>
  
  <div class="form-floating">
    <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
    <label for="floatingTextarea">Comments</label>
  </div>
</form>

• When using floating labels, the placeholder is required but can be empty.

Summary of Bootstrap Form Controls:

• Basic Input: Use .form-control to style input fields for text, email, password, etc.
• Select Dropdown: Use .form-select for consistent select dropdowns.
• Textarea: Style multi-line text fields with .form-control.
• Form Sizing: Use .form-control-sm and .form-control-lg for different input sizes.
• Disabled & Read-Only: Use disabled or readonly for non-editable fields.
• Validation: Apply .is-valid or .is-invalid for validation styling.
• File Input: Style file upload fields using .form-control.
• Form Layout: Create horizontal layouts using .row and .col-*.
• Floating Labels: Use .form-floating to display labels that float above the input.