Form controls
Bootstrap styles text inputs, selects, textareas, checkboxes and switches with a few classes.
In this page:
Syntax
<label for="id" class="form-label">Label</label>
<input type="text" class="form-control" id="id">
<select class="form-select">
<option>option</option>
</select>Form controls
Give text inputs, textareas and selects the .form-control or .form-select class and pair each with a label. Checkboxes and radios use .form-check with .form-check-input and .form-check-label, and .form-switch makes a toggle. .form-range styles sliders.
Note:
Every input needs a label for accessibility and usability.
Example: Form controls
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<div class="mb-3"><label for="email" class="form-label">Email address</label><input type="email" class="form-control" id="email" placeholder="[email protected]"></div>
<div class="mb-3"><label for="plan" class="form-label">Plan</label><select id="plan" class="form-select"><option>Free</option><option>Pro</option></select></div>
<div class="form-check form-switch mb-3"><input class="form-check-input" type="checkbox" role="switch" id="news" checked><label class="form-check-label" for="news">Newsletter</label></div>
<label for="vol" class="form-label">Volume</label><input type="range" class="form-range" id="vol">
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Skipping labels
- Forgetting form-control
- Using placeholder text as the only label
Chapter Summary
- form-control styles inputs
- form-select styles selects
- form-check for checkboxes and radios
- form-switch and form-range
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: