Bootstrap Forms
Bootstrap styles standard HTML form elements like inputs, checkboxes, radios, and selects with the .form-control and related classes, giving them a consistent, polished appearance.
Forms are typically laid out using the grid system for alignment, and labels are paired with .form-label for accessible, well-spaced form fields.
<div class="mb-3">
<label class="form-label">Label</label>
<input type="text" class="form-control">
</div>Basic form controls
Add .form-control to text inputs, textareas, and selects for consistent styling and full-width sizing. Add .form-label to <label> elements for proper spacing above each field.
Checkboxes and radios
Wrap checkboxes and radios in a div with .form-check, and give the input .form-check-input and the label .form-check-label for correctly aligned, clickable controls.
<form>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" placeholder="name@example.com">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>A styled email input field with a label above it, and a blue Submit buttonform-control gives the input full width and consistent border styling, and mb-3 adds spacing below the field.
<div class="form-check">
<input class="form-check-input" type="checkbox" id="agree">
<label class="form-check-label" for="agree">I agree to the terms</label>
</div>A checkbox aligned neatly with its label textform-check-input and form-check-label align the checkbox and its label with correct spacing.
Key points
- .form-control styles text inputs, textareas and selects.
- .form-label styles form labels with proper spacing.
- .form-check, .form-check-input and .form-check-label style checkboxes/radios.
- Grid classes like .mb-3 are often used to space form fields.