Forms are where design quality is most visible to users, and Bootstrap gives every control a consistent, accessible baseline. This lesson covers text inputs, selects, checks and switches, layout with the grid, input groups, floating labels and client-side validation styling.
Bootstrap does not style raw inputs automatically; you opt in with classes:
<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 never share your email.</div>
</div>
<div class="mb-3">
<label for="plan" class="form-label">Plan</label>
<select class="form-select" id="plan">
<option selected>Choose...</option>
<option value="free">Free</option>
<option value="pro">Pro</option>
</select>
</div>form-control styles text inputs and textareas; form-select styles dropdowns; form-label and form-text handle labels and helper text. Always pair labels with inputs via for and id; it is essential for screen readers and enlarges the click target. Sizing variants form-control-lg and form-control-sm match button sizes.
<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>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="dark">
<label class="form-check-label" for="dark">Dark mode</label>
</div>
<input type="range" class="form-range" min="0" max="100" id="volume">Add form-check-inline to place options side by side. The switch variant is just a restyled checkbox, so it submits the same data.
Forms use the same rows and columns as everything else:
<form class="row g-3">
<div class="col-md-6"><label class="form-label" for="fn">First name</label><input class="form-control" id="fn"></div>
<div class="col-md-6"><label class="form-label" for="ln">Last name</label><input class="form-control" id="ln"></div>
<div class="col-md-4"><label class="form-label" for="zip">Zip</label><input class="form-control" id="zip"></div>
<div class="col-12"><button class="btn btn-primary" type="submit">Submit</button></div>
</form>The g-3 gutter keeps consistent spacing both horizontally and when fields stack on mobile.
Input groups attach text, icons, buttons or selects directly to a field:
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search courses" aria-label="Search">
<button class="btn btn-outline-secondary" type="button">Search</button>
</div>Common uses: currency prefixes, domain suffixes, search buttons and password reveal toggles.
Floating labels place the label inside the field and shrink it on focus, saving vertical space. Note the placeholder attribute is required and the label comes after the input:
<div class="form-floating mb-3">
<input type="email" class="form-control" id="femail" placeholder="name@example.com">
<label for="femail">Email address</label>
</div>Add is-valid or is-invalid to controls, with sibling valid-feedback or invalid-feedback messages. For native HTML5 validation, add novalidate to the form and toggle the was-validated class on submit with a few lines of JavaScript; Bootstrap then colors each field from its validity state.
<input type="text" class="form-control is-invalid" id="user">
<div class="invalid-feedback">Please choose a username.</div>form-control, form-select, form-check, form-range.row g-3 and responsive columns like any grid.is-valid/is-invalid with feedback divs for clear validation UX.Next lesson: Modals, Tooltips and Popovers, the interactive overlay components.