SyntaxStudy
Sign Up
Bootstrap Beginner 8 min read

Forms and Inputs

Bootstrap Forms

Basic Form

<form>
  <div class="mb-3">
    <label class="form-label">Email</label>
    <input type="email" class="form-control" placeholder="name@example.com">
  </div>
  <div class="mb-3">
    <label class="form-label">Password</label>
    <input type="password" class="form-control">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input">
    <label class="form-check-label">Remember me</label>
  </div>
  <button class="btn btn-primary">Submit</button>
</form>

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 enter a valid value.</div>
Pro Tip

Use floating labels with form-floating wrapper for a modern Material-style look.