Form controls
Browsers draw form fields their own way, and they look different in different browsers. Bootstrap gives fields one look: full width, the same height, rounded corners and a blue highlight on focus. You only add the right class to each field and label.
A text field
The label gets the form-label class, the field form-control, the hint under the field form-text. The for and id attributes link the label to the field, as in the tutorial:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="anna@example.com">
<div class="form-text">We never share your address with anyone.</div>
</div>The field stretches to full width, with the label above and a gray hint below. Click the field and a light blue outline appears. The mb-3 wrapper separates the field from the next one.
Other fields
| Class | Used for |
|---|---|
form-control | input of any text type and textarea |
form-select | A select dropdown |
form-check + form-check-input + form-check-label | A checkbox or radio button |
form-switch | A checkbox shown as a switch |
form-range | A slider |
form-control-lg, form-control-sm | Large and small field |
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="mb-3">
<label for="plan" class="form-label">Plan</label>
<select class="form-select" id="plan">
<option>Free</option>
<option selected>Team — $9</option>
</select>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="news">
<label class="form-check-label" for="news">Receive news</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="dark" checked>
<label class="form-check-label" for="dark">Dark theme</label>
</div>A dropdown, a regular checkbox and a switch. The checkbox and the switch can be clicked together with their labels.
A field with an add-on
input-group joins a field with text or a button. Text is wrapped in input-group-text:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="number" class="form-control" aria-label="Amount" value="49">
<span class="input-group-text">.00</span>
</div>
<div class="input-group">
<input type="search" class="form-control" placeholder="Find a task" aria-label="Find a task">
<button class="btn btn-outline-secondary" type="button">Search</button>
</div>The first line is an amount field with a dollar sign on the left, the second a search with a button on the right. This search sits above a table in the admin dashboard.
Common mistake
Removing the label and keeping only a placeholder. The placeholder disappears as soon as the person starts typing, so they forget what the field was, and screen readers do not always announce it. Every field needs a <label>. If the label is not needed visually, hide it with visually-hidden or give the field an aria-label.