Forms in Bootstrap

From the Bootstrap 5 cheat sheet · Components · verified Jul 2026

Forms

Form controls and layouts

html
<!-- Basic Form -->
<form>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<!-- Form Grid -->
<form class="row g-3">
  <div class="col-md-6">
    <label class="form-label">First Name</label>
    <input type="text" class="form-control">
  </div>
  <div class="col-md-6">
    <label class="form-label">Last Name</label>
    <input type="text" class="form-control">
  </div>
</form>
💡 Use form-floating for modern floating label inputs
⚡ Input groups combine inputs with text/buttons
📌 Add needs-validation class and novalidate for custom validation
🔥 Form-check-inline for horizontal checkboxes/radios

More Bootstrap tasks

Back to the full Bootstrap 5 cheat sheet