Form Basics

Prev Next

Every Bootstrap 3 form is built from two ingredients: .form-control on the input itself, and .form-group wrapping the label/input pair. This lesson covers just those two building blocks plus default checkboxes and radios — form layouts (stacked, inline, horizontal) come next, and validation states and input groups after that.

1. Text Inputs, Selects & Textareas: .form-control

Add .form-control to any <input>, <select> or <textarea> to get consistent full-width sizing, padding, a light border, and a blue focus glow — one class, works identically across all three element types.

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

<select class="form-control">
  <option>Easy</option>
  <option>Moderate</option>
  <option>Difficult</option>
</select>

<textarea class="form-control" rows="3"></textarea>

2. Grouping Fields: .form-group

Wrap each label/input pair in a <div class="form-group">. It adds consistent bottom margin between fields so a form's fields don't crowd each other, and it's the element that later gets a .has-error/.has-success class when you add validation states.

<div class="form-group">
  <label for="trailName">Trail name</label>
  <input type="text" class="form-control" id="trailName">
</div>

Where this class comes from: .form-group was introduced right here in Bootstrap 3 and carried through unchanged into Bootstrap 4 — it wasn't until Bootstrap 5 dropped it entirely in favor of plain margin utilities (like .mb-3) on the wrapping element.

3. Checkboxes & Radios

Bootstrap 3 doesn't restyle the native checkbox/radio input itself — it just wraps the <label> (with the input nested inside it) in a <div class="checkbox"> or <div class="radio"> for consistent spacing and clickable-label alignment.

<div class="checkbox">
  <label>
    <input type="checkbox"> Dog-friendly trail
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="difficulty" value="easy" checked> Easy
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="difficulty" value="moderate"> Moderate
  </label>
</div>

4. Worked Example: TrailMap Trail Name + Description Fields

The first two fields of TrailMap's "Submit a Trail" form: a required text field for the trail name, and a textarea for a description, each in its own .form-group.

<form>
  <div class="form-group">
    <label for="trailName">Trail name</label>
    <input type="text" class="form-control" id="trailName" placeholder="e.g. Ridgeline Loop">
  </div>
  <div class="form-group">
    <label for="trailDescription">Description</label>
    <textarea class="form-control" id="trailDescription" rows="4" placeholder="What should other hikers know?"></textarea>
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Dog-friendly trail</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit trail</button>
</form>

Next up: that form is stacked (the default). Head to Form Layouts to see the same fields rearranged inline and horizontally, and to finish the full "Submit a Trail" form.

Prev Next