Building Forms with Bootstrap

Forms are how users provide information to a site, and Bootstrap styles every common form element consistently, so fields, labels and buttons line up neatly without custom CSS.

A basic input

<label class="form-label">Email</label>
<input type="email" class="form-control">

The form-control class gives an input its full-width, evenly padded appearance, along with a clear focus outline when the field is selected.

Spacing fields correctly

<div class="mb-3">
  <label class="form-label">Name</label>
  <input class="form-control">
</div>

Wrapping each field with a margin utility such as mb-3 keeps fields from crowding together, which otherwise makes a form feel cramped and harder to scan quickly.

Dropdowns and checkboxes

<select class="form-select">
  <option>One</option>
  <option>Two</option>
</select>

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

Showing validation state

Adding is-valid or is-invalid to a field changes its border colour and can display feedback text, giving immediate visual confirmation of whether an entry was accepted:

<input class="form-control is-invalid">
<div class="invalid-feedback">Please enter a valid email.</div>

Grouping an input with extra content

An input group attaches related content directly to a field, such as a currency symbol or a search button, without it looking like a separate element:

<div class="input-group">
  <span class="input-group-text">$</span>
  <input type="number" class="form-control">
</div>

Floating labels

A floating label sits inside the field until the user starts typing, then animates upward, saving vertical space while still keeping the label visible:

<div class="form-floating">
  <input type="email" class="form-control" id="floatEmail" placeholder="name@example.com">
  <label for="floatEmail">Email address</label>
</div>

A tip on labels and accessibility

Always pair a label with its input using a matching id and for attribute. Beyond helping screen readers announce the field correctly, it also lets a user click the label text itself to focus the input, a small convenience that noticeably improves how a form feels to use, especially on a touch screen where tapping a small checkbox directly can be fiddly.