Forms Bootstrap
5 min read Quiz at the end
Style form controls, checkboxes, selects, and show is-valid/is-invalid validation states.
Forms
<form>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="name@example.com">
<div class="form-text">We never share your email.</div>
</div>
<div class="mb-3">
<label for="select" class="form-label">Select</label>
<select class="form-select" id="select">
<option selected>Choose...</option>
<option>Option 1</option>
</select>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="agree">
<label class="form-check-label" for="agree">I agree</label>
</div>
</div>
<!-- Validation states -->
<input class="form-control is-valid">
<div class="valid-feedback">Looks good!</div>
<input class="form-control is-invalid">
<div class="invalid-feedback">Please provide a valid value.</div>
</form>
Topic Quiz · 2 questions
Test your understanding before moving on
1. What class is used on form inputs?
💡 form-control applies Bootstrap styled input with proper padding and focus ring.
2. What class applies validation success state?
💡 is-valid triggers green border and valid-feedback message display.