Forms

See Bootstrap docs
We'll never share your email with anyone else.
<form>
  <div class="mb-3">
    <label class="form-label" for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <div id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label class="form-label" for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Form states

Looks good!
Shucks, check the formatting of that and try again.
Sorry, that username's taken. Try another?
<div class="mb-3">
  <label class="form-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control is-valid" id="inputSuccess1">
  <div class="valid-feedback">Looks good!</div>
</div>

<div class="mb-3">
  <label class="form-label" for="inputWarning1">Input with error</label>
  <input type="text" class="form-control is-invalid" id="inputWarning1">
  <div class="invalid-feedback">Shucks, check the formatting of that and try again.</div>
</div>

<div class="mb-3">
  <label class="form-label" for="inputDanger1">Input with error</label>
  <input type="text" class="form-control is-invalid" id="inputDanger1">
  <div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
</div>

Form elements

Dropdown menus

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="customCheck1">
  <label class="form-check-label" for="customCheck1">Check this custom checkbox</label>
</div>
<div class="form-check">
  <input type="checkbox" class="form-check-input" id="customCheck2">
  <label class="form-check-label" for="customCheck2">Check this custom checkbox</label>
</div>
<div class="form-check">
  <input type="checkbox" class="form-check-input" id="customCheck3">
  <label class="form-check-label" for="customCheck3">Check this custom checkbox</label>
</div>

<div class="form-check">
  <input type="radio" id="customRadio1" name="customRadio" class="form-check-input">
  <label class="form-check-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="form-check">
  <input type="radio" id="customRadio2" name="customRadio" class="form-check-input">
  <label class="form-check-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

<label for="customRange1">Example range</label>
<input type="range" class="form-range" id="customRange1">

<label for="formFile" class="form-label">Default file input example</label>
<input class="form-control" type="file" id="formFile">

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

<label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#6672e8" title="Choose your color">

Input groups

@

@example.com

$ .00
$
$ 0.00
Action Another action Something else here Separated link