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

Default file input example

Dropdown menus

Color picker


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

@

@example.com

$ .00

$

$ 0.00

Native input

Datepicker

Form states

Form elements

Input groups

Date