Components

Forms

Style and validate forms beautifully with Bootstrap's comprehensive form components.

Bootstrap Forms

Bootstrap provides extensive form styling through CSS classes. Key form classes:

  • .form-control — text inputs, textareas, selects
  • .form-check — checkboxes and radio buttons
  • .form-label — labels
  • .form-text — help text
  • .mb-3 — spacing between form groups

Floating Labels

Bootstrap 5 includes floating label inputs that animate from placeholder to label on focus.

Validation

Add .was-validated to the form to show validation states. Use :valid and :invalid pseudo-classes with Bootstrap's feedback components.

Example

html
<!-- Basic form -->
<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 class="form-text">We'll never share your email.</div>
  </div>

  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password">
  </div>

  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="remember">
    <label class="form-check-label" for="remember">Remember me</label>
  </div>

  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<!-- Floating labels -->
<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatEmail" placeholder="x">
  <label for="floatEmail">Email address</label>
</div>

<!-- Input group -->
<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<!-- Select -->
<select class="form-select mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

<!-- Validation -->
<form class="needs-validation" novalidate>
  <div class="mb-3">
    <input type="text" class="form-control" required>
    <div class="valid-feedback">Looks good!</div>
    <div class="invalid-feedback">Please provide a value.</div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>
Try it yourself — HTML