Bootstrap Forms

Introduction

Forms are one of the most essential UI components of any web application. In this chapter, we will dive deep into Bootstrap’s form components, including validation, custom controls, and responsive layouts.

1. Basic Structure

Bootstrap forms use the .mb-3 utility for spacing and .form-label for styling.

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

2. Form Controls

Text & Email Inputs

Use .form-control to style text and email inputs.

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

Select Dropdown

Use .form-select for dropdown menus.

<select class="form-select">
  <option selected>Choose...</option>
  <option value="1">One</option>
</select>

Checkboxes & Radios

Wrap them in .form-check and use .form-check-input.

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

3. Form Validation

Bootstrap includes valid and invalid styles. Adding .is-invalid to an input will trigger the red border and feedback text.

<div class="mb-3">
  <label class="form-label">Email</label>
  <input type="email" class="form-control is-invalid" required>
  <div class="invalid-feedback">
    Please provide a valid email.
  </div>
</div>

4. Horizontal Forms

Use the grid system to layout forms horizontally.

<div class="row mb-3">
  <label class="col-sm-2 col-form-label">Email</label>
  <div class="col-sm-10">
    <input type="email" class="form-control">
  </div>
</div>