Bootstrap Forms

Browsers render form controls inconsistently by default — checkboxes, selects, and text inputs all look slightly different across Chrome, Firefox, and Safari. Bootstrap's form classes normalize that appearance and add consistent spacing, without changing how the underlying HTML works.

Text inputs and labels

<div class="mb-3">
  <label for="email" class="form-label">Email address</label>
  <input type="email" class="form-control" id="email" placeholder="you@example.com" />
  <div class="form-text">We'll never share your email with anyone else.</div>
</div>

.form-control is the class that does the real work — consistent padding, border, border radius, and a focus ring across every text-like <input>, <textarea>, and <select> (selects use .form-select instead, covered below). Pairing every input with a <label for="..."> matching its id isn't a Bootstrap requirement — it's basic HTML accessibility — but Bootstrap's .form-label class just gives that label consistent spacing and weight.

.form-text styles small helper text below a field, at a muted color and smaller size — useful for hints or instructions that shouldn't compete visually with the label or the input itself.

Selects, checkboxes, and radios

<select class="form-select" aria-label="Choose a plan">
  <option selected>Choose a plan...</option>
  <option value="free">Free</option>
  <option value="pro">Pro</option>
</select>

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="terms" />
  <label class="form-check-label" for="terms">
    I agree to the terms and conditions
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="plan" id="planFree" checked />
  <label class="form-check-label" for="planFree">Free</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="plan" id="planPro" />
  <label class="form-check-label" for="planPro">Pro</label>
</div>

Checkboxes and radios need both .form-check on the wrapping <div> and .form-check-input/.form-check-label on the input and label — the wrapper is what handles the layout (icon and text side by side), while the inner classes style each piece.

Laying out a form with the grid

Because form controls are just elements, they drop directly into the grid system from earlier lessons:

<form>
  <div class="row g-3">
    <div class="col-md-6">
      <label for="firstName" class="form-label">First name</label>
      <input type="text" class="form-control" id="firstName" />
    </div>
    <div class="col-md-6">
      <label for="lastName" class="form-label">Last name</label>
      <input type="text" class="form-control" id="lastName" />
    </div>
  </div>
  <button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>

First name and last name sit side by side from md up and stack on mobile — the exact same col-md-6 pattern used for any other two-column layout, which is the point: forms don't get a special layout system in Bootstrap, they just use the grid like everything else.

Sizing and disabled state

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

Like buttons, form controls accept size modifiers, and a real disabled attribute both blocks interaction and gets styled automatically — you don't need a separate class for the disabled look.