Category: html_css
Forms & Validation
Published on 06 Aug 2026
Explanation
Bootstrap Forms provide pre-styled form controls that help create responsive and user-friendly forms with minimal CSS. Bootstrap supports various input elements such as text fields, email, password, checkboxes, radio buttons, selects, textareas, and input groups.
Code:
<form>
<div class="mb-3">
<label class="form-label">Full Name</label>
<input type="text" class="form-control" placeholder="Enter your name">
</div>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control" placeholder="Enter your email">
</div>
<button class="btn btn-primary">Submit</button>
</form>
Explanation
Bootstrap provides various form controls including select boxes, checkboxes, radio buttons, switches, file uploads, and textareas. These components have consistent styling across modern browsers.
Code:
<div class="mb-3">
<label class="form-label">Course</label>
<select class="form-select">
<option>Java</option>
<option>React</option>
<option>Spring Boot</option>
</select>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="agree">
<label class="form-check-label" for="agree">Accept Terms</label>
</div>
Explanation
Bootstrap Validation provides visual feedback for valid and invalid form inputs. Use the `is-valid` and `is-invalid` classes to indicate validation status. Feedback messages help users correct their input before submitting the form.
Code:
<div class="mb-3"> <label class="form-label">Username</label> <input type="text" class="form-control is-valid" value="john123"> <div class="valid-feedback">Looks good!</div> </div> <div class="mb-3"> <label class="form-label">Email</label> <input type="email" class="form-control is-invalid"> <div class="invalid-feedback">Please enter a valid email.</div> </div>
Explanation
Bootstrap also supports HTML5 form validation. By adding the `needs-validation` class and the `novalidate` attribute, developers can combine browser validation with Bootstrap's custom validation styles.
Code:
<form class="needs-validation" novalidate>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control" required>
<div class="invalid-feedback">Email is required.</div>
</div>
<button class="btn btn-success" type="submit">Register</button>
</form>
Explanation
Bootstrap Input Groups allow developers to combine inputs with icons, buttons, or text. They are commonly used for search boxes, URLs, currency inputs, and login forms, improving both usability and appearance.
Code:
<div class="input-group mb-3"> <span class="input-group-text">@</span> <input type="text" class="form-control" placeholder="Username"> </div> <div class="input-group"> <span class="input-group-text">$</span> <input type="number" class="form-control" placeholder="Amount"> <span class="input-group-text">.00</span> </div>