Forms


              <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>


              <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>

Toggle this switch element

Check this custom checkbox

Toggle this custom radio

Or toggle this other custom radio

Example range

File browser

Choose file... Browse

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="custom-range" id="customRange1">



              <div class="form-file">

                  <input type="file" class="form-file-input" id="customFile">

                  <label class="form-file-label" for="customFile">

                    <span class="form-file-text">Choose file...</span>

                    <span class="form-file-button">Browse</span>

                  <label>

              </div>



              <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>

@

@example.com

$ .00

$

$ 0.00

Form states

Elements

Input groups