Forms

A plain HTML form works fine, but it looks like it's from 1998. Bootstrap's form classes fix spacing, sizing, and focus states in one pass, so a form looks intentional instead of like an afterthought.

form-label and form-control

form-label styles a label with consistent spacing, and form-control gives an input full width, padding, a border, and a visible focus ring:

HTML index.html

<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>
<div class="mb-3">
  <label for="msg" class="form-label">Message</label>
  <textarea class="form-control" id="msg" rows="3"></textarea>
</div>

Rendered result

A bold-ish "Email address" label above a full-width, evenly-padded text input with a light gray border; below it, a "Message" label above a similarly-styled multi-line text box. Clicking into either field shows a soft blue glow around its border — Bootstrap's default focus state.

mb-3 (margin-bottom, step 3) is a spacing utility, not a form-specific class — it's what puts breathing room between each field group. You'll see the same spacing utilities used all over the rest of this course.

Checkboxes and radios

HTML index.html

<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</label>
</div>

Rendered result

A properly-aligned checkbox sitting directly next to its label text on the same line, both vertically centered — instead of the slightly-off default alignment browsers give a bare, unstyled checkbox and label.

Validation states

Adding is-valid or is-invalid to a form-control (usually toggled by your own JavaScript after checking the input) colors the border and, paired with a feedback element, shows a message:

HTML index.html

<input type="text" class="form-control is-invalid" value="not-an-email">
<div class="invalid-feedback">Please enter a valid email address.</div>

Rendered result

A text input with a red border instead of the default gray, and a small red line of text just beneath it reading "Please enter a valid email address." — the feedback text is hidden unless the input has the is-invalid class right above it.

Note: Bootstrap's is-valid/is-invalid classes are purely visual — they don't validate anything themselves. You (or the browser's built-in required/pattern validation) still have to decide when a field is actually valid and toggle the class accordingly; Bootstrap just makes sure the result looks consistent once you do.

PreviousButtons NextNavbar