Form Controls
We'll never share your email with anyone else.
Radio buttons

                <form>
                    <div class="form-group">
                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                               placeholder="Enter email">
                        <label for="exampleInputEmail1">Email address</label>
                        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone
                            else.
                        </small>
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                        <label for="exampleInputPassword1">Password</label>
                    </div>
                    <div class="form-group">
                        <label for="exampleFormControlSelect1">Example select</label>
                        <select class="form-control" id="exampleFormControlSelect1">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="exampleFormControlSelect2">Example multiple select</label>
                        <select multiple class="form-control" id="exampleFormControlSelect2">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                        <label for="exampleFormControlTextarea1">Example textarea</label>
                    </div>
                    <div class="form-group">
                        <label for="exampleFormControlFile1">Example file input</label>
                        <input type="file" class="form-control-file" id="exampleFormControlFile1">
                    </div>
                    <fieldset class="form-group">
                        <legend>Radio buttons</legend>
                        <div class="form-check">
                            <label class="form-check-label">
                                <input type="radio" class="form-check-input" name="optionsRadios"
                                       id="optionsRadios1" value="option1" checked=""/>
                                <span class="radio-icon"></span>
                                <span>Option one is this and that&mdash;be sure to include why it's great</span>
                            </label>
                        </div>
                        <div class="form-check">
                            <label class="form-check-label">
                                <input type="radio" class="form-check-input" name="optionsRadios"
                                       id="optionsRadios2" value="option2"/>
                                <span class="radio-icon"></span>
                                <span>Option two can be something else and selecting it will deselect option one</span>
                            </label>
                        </div>
                        <div class="form-check disabled">
                            <label class="form-check-label">
                                <input type="radio" class="form-check-input" name="optionsRadios"
                                       id="optionsRadios3" value="option3" disabled=""/>
                                <span class="radio-icon"></span>
                                <span>Option three is disabled</span>
                            </label>
                        </div>
                    </fieldset>
                    <div class="form-check">
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input"/>
                            <span class="checkbox-icon"></span>
                            <span>Check me out</span>
                        </label>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
                
Textual Inputs

                <div class="form-group">
                    <input class="form-control" type="text" value="Artisanal kale" id="example-text-input"/>
                    <label for="example-text-input">Text</label>
                </div>

                <div class="form-group">
                    <input class="form-control" type="search" value="How do I shoot web" id="example-search-input"/>
                    <label for="example-search-input">Search</label>
                </div>
                <div class
                     ="form-group">
                    <input class="form-control" type="email" value="bootstrap@example.com"
                           id="example-email-input"/>
                    <label for="example-email-input">Email</label>
                </div>

                <div class="form-group">
                    <input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input"/>
                    <label for="example-url-input">URL</label>
                </div>

                <div class="form-group">
                    <input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input"/>
                    <label for="example-tel-input">Telephone</label>
                </div>

                <div class="form-group">
                    <input class="form-control" type="password" value="hunter2" id="example-password-input"/>
                    <label for="example-password-input">Password</label>
                </div>

                <div class="form-group">
                    <input class="form-control" type="number" value="42" id="example-number-input"/>
                    <label for="example-number-input">Number</label>
                </div>

                <div class="form-group">
                    <input class="form-control" type="datetime-local" value="2011-08-19T13:45:00"
                           id="example-datetime-local-input"/>
                    <label for="example-datetime-local-input">Date and time</label>
                </div>

                <div class="form-group">
                    <input class="form-control" type="date" value="2011-08-19" id="example-date-input"/>
                    <label for="example-date-input">Date</label>
                </div>

                <div class="form-group">
                    <input class="form-control" type="month" value="2011-08" id="example-month-input"/>
                    <label for="example-month-input">Month</label>
                </div>

                <div class="form-group">
                    <input class="form-control" type="week" value="2011-W33" id="example-week-input"/>
                    <label for="example-week-input">Week</label>
                </div>

                <div class="form-group">
                    <input class="form-control" type="time" value="13:45:00" id="example-time-input"/>
                    <label for="example-time-input">Time</label>
                </div>

                <div class="form-group">
                    <label for="example-color-input">Color</label>
                    <input class="form-control" type="color" value="#563d7c" id="example-color-input"/>
                </div>
                

Sizing

Input

                <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
                <input class="form-control" type="text" placeholder="Default input">
                <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
                
Select

                <select class="form-control form-control-lg">
                    <option>Large select</option>
                </select>
                <select class="form-control">
                    <option>Default select</option>
                </select>
                <select class="form-control form-control-sm">
                    <option>Small select</option>
                </select>
                

Read Only

Attribute

                <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
                
Readonly plain text

                <form>
                    <div class="form-group row">
                        <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
                        <div class="col-sm-10">
                            <input type="text" readonly class="form-control-plaintext" id="staticEmail"
                                   value="email@example.com">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                        </div>
                    </div>
                </form>
                
Readonly plain text

                <form class="form-inline">
                    <div class="form-group">
                        <label for="staticEmail2" class="sr-only">Email</label>
                        <input type="text" readonly class="form-control-plaintext" id="staticEmail2"
                               value="email@example.com">
                    </div>
                    <div class="form-group mx-sm-3">
                        <label for="inputPassword2" class="sr-only">Password</label>
                        <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
                    </div>
                    <button type="submit" class="btn btn-primary">Confirm identity</button>
                </form>
                

Checkboxes and radios

Default Checkboxes (Stacked)

                <div class="form-check">
                    <label class="form-check-label">
                        <input class="form-check-input" type="checkbox" value="">
                        <span class="checkbox-icon"></span>
                        <span class="form-check-description">Option one is this and that&mdash;be sure to include why it's great</span>
                    </label>
                </div>
                <div class="form-check disabled">
                    <label class="form-check-label">
                        <input class="form-check-input" type="checkbox" value="" disabled>
                        <span class="checkbox-icon"></span>
                        <span class="form-check-description">Option two is disabled</span>
                    </label>
                </div>
                
Default Radios (Stacked)

                <div class="form-check">
                    <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1"
                               value="option1" checked=""/>
                        <span class="radio-icon"></span>
                        <span class="form-check-description">Option one is this and that&mdash;be sure to include why it's great</span>
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2"
                               value="option2"/>
                        <span class="radio-icon"></span>
                        <span class="form-check-description">Option two can be something else and selecting it will deselect option one</span>
                    </label>
                </div>
                <div class="form-check disabled">
                    <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3"
                               value="option3" disabled=""/>
                        <span class="radio-icon"></span>
                        <span class="form-check-description">Option three is disabled</span>
                    </label>
                </div>
                
Inline Checkboxes

                <div class="form-check form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"/>
                        <span class="checkbox-icon"></span>
                        <span class="form-check-description">1</span>
                    </label>
                </div>
                <div class="form-check form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"/>
                        <span class="checkbox-icon"></span>
                        <span class="form-check-description">2</span>
                    </label>
                </div>
                <div class="form-check form-check-inline disabled">
                    <label class="form-check-label">
                        <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3"
                               disabled=""/>
                        <span class="checkbox-icon"></span>
                        <span class="form-check-description">3</span>
                    </label>
                </div>
                
Inline Radios

                <div class="form-check form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1"
                               value="option1"/>
                        <span class="radio-icon"></span>
                        <span class="form-check-description">1</span>
                    </label>
                </div>
                <div class="form-check form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2"
                               value="option2"/>
                        <span class="radio-icon"></span>
                        <span class="form-check-description">2</span>
                    </label>
                </div>
                <div class="form-check form-check-inline disabled">
                    <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3"
                               value="option3" disabled=""/>
                        <span class="radio-icon"></span>
                        <span class="form-check-description">3</span>
                    </label>
                </div>
                
Wihout Labels

                <div class="form-check">
                    <label class="form-check-label">
                        <input class="form-check-input" type="checkbox" id="blankCheckbox" value="option1"
                               aria-label="..."/>
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="blankRadio" id="blankRadio1" value="option1"
                               aria-label="..."/>
                        <span class="radio-icon"></span>
                    </label>
                </div>
                

Form layouts

Form Groups

                <form>
                    <div class="form-group">
                        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
                        <label class="form-control-label" for="formGroupExampleInput">Example label</label>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
                        <label class="form-control-label" for="formGroupExampleInput2">Another label</label>
                    </div>
                </form>
                
Form Grid

                <form>
                    <div class="row">
                        <div class="col">
                            <input type="text" class="form-control" placeholder="First name">
                        </div>
                        <div class="col">
                            <input type="text" class="form-control" placeholder="Last name">
                        </div>
                    </div>
                </form>
                
Form Row

                <form>
                    <div class="form-row">
                        <div class="col">
                            <input type="text" class="form-control" placeholder="First name">
                        </div>
                        <div class="col">
                            <input type="text" class="form-control" placeholder="Last name">
                        </div>
                    </div>
                </form>
                
Grid System

                <form>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
                            <label for="inputEmail4" class="col-form-label">Email</label>
                        </div>
                        <div class="form-group col-md-6">
                            <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
                            <label for="inputPassword4" class="col-form-label">Password</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
                        <label for="inputAddress" class="col-form-label">Address</label>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="inputAddress2"
                               placeholder="Apartment, studio, or floor">
                        <label for="inputAddress2" class="col-form-label">Address 2</label>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <input type="text" class="form-control" id="inputCity">
                            <label for="inputCity" class="col-form-label">City</label>
                        </div>
                        <div class="form-group col-md-4">
                            <label for="inputState" class="col-form-label">State</label>
                            <select id="inputState" class="form-control">Choose</select>
                        </div>
                        <div class="form-group col-md-2">
                            <input type="text" class="form-control" id="inputZip">
                            <label for="inputZip" class="col-form-label">Zip</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-check">
                            <label class="form-check-label">
                                <input class="form-check-input" type="checkbox">
                                <span class="checkbox-icon"></span>
                                <span class="form-check-description">Check me out</span>
                            </label>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">Sign in</button>
                </form>
                
Horizontal form
Radios
Checkbox

                <div class="container">
                    <form>
                        <div class="form-group row">
                            <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                            </div>
                        </div>
                        <fieldset class="form-group">
                            <div class="row">
                                <legend class="col-form-legend col-sm-2">Radios</legend>
                                <div class="col-sm-10">
                                    <div class="form-check">
                                        <label class="form-check-label">
                                            <input class="form-check-input" type="radio" name="gridRadios"
                                                   id="gridRadios1" value="option1" checked>
                                            <span class="radio-icon"></span>
                                            <span class="form-check-description">Option one is this and that&mdash;be sure to include why it's great</span>
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <label class="form-check-label">
                                            <input class="form-check-input" type="radio" name="gridRadios"
                                                   id="gridRadios2" value="option2">
                                            <span class="radio-icon"></span>
                                            <span class="form-check-description">Option two can be something else and selecting it will deselect option one</span>
                                        </label>
                                    </div>
                                    <div class="form-check disabled">
                                        <label class="form-check-label">
                                            <input class="form-check-input" type="radio" name="gridRadios"
                                                   id="gridRadios3" value="option3" disabled>
                                            <span class="radio-icon"></span>
                                            <span class="form-check-description">Option three is disabled</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <div class="form-group row">
                            <div class="col-sm-2">Checkbox</div>
                            <div class="col-sm-10">
                                <div class="form-check">
                                    <label class="form-check-label">
                                        <input class="form-check-input" type="checkbox">
                                        <span class="checkbox-icon"></span>
                                        <span class="form-check-description">Check me out</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-10">
                                <button type="submit" class="btn btn-primary">Sign in</button>
                            </div>
                        </div>
                    </form>
                </div>
                
Column Sizing

                <form>
                    <div class="form-row">
                        <div class="col-7">
                            <input type="text" class="form-control" placeholder="City">
                        </div>
                        <div class="col">
                            <input type="text" class="form-control" placeholder="State">
                        </div>
                        <div class="col">
                            <input type="text" class="form-control" placeholder="Zip">
                        </div>
                    </div>
                </form>
                
Auto-sizing
@

                <form>
                    <div class="form-row align-items-center">
                        <div class="col-auto">
                            <label class="sr-only" for="inlineFormInput">Name</label>
                            <input type="text" class="form-control mb-2 mb-sm-0" id="inlineFormInput"
                                   placeholder="Jane Doe">
                        </div>
                        <div class="col-auto">
                            <label class="sr-only" for="inlineFormInputGroup">Username</label>
                            <div class="input-group mb-2 mb-sm-0">
                                <div class="input-group-addon">@</div>
                                <input type="text" class="form-control" id="inlineFormInputGroup"
                                       placeholder="Username">
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="form-check mb-2 mb-sm-0">
                                <label class="form-check-label">
                                    <input class="form-check-input" type="checkbox"> Remember me
                                </label>
                            </div>
                        </div>
                        <div class="col-auto">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </form>
                
Size-specific column classes.
@

                <form>
                    <div class="form-row align-items-center">
                        <div class="col-sm-3">
                            <label class="sr-only" for="inlineFormInputName">Name</label>
                            <input type="text" class="form-control mb-2 mb-sm-0" id="inlineFormInputName"
                                   placeholder="Jane Doe">
                        </div>
                        <div class="col-sm-3">
                            <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
                            <div class="input-group mb-2 mb-sm-0">
                                <div class="input-group-addon">@</div>
                                <input type="text" class="form-control" id="inlineFormInputGroupUsername"
                                       placeholder="Username">
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="form-check mb-2 mb-sm-0">
                                <label class="form-check-label">
                                    <input class="form-check-input" type="checkbox"> Remember me
                                </label>
                            </div>
                        </div>
                        <div class="col-auto">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </form>
                
Custom Form Controls

Custom form controls and selects are also supported.


                <form>
                    <div class="form-row align-items-center">
                        <div class="col-auto">
                            <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
                            <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelect">
                                <option selected>Choose...</option>
                                <option value="1">One</option>
                                <option value="2">Two</option>
                                <option value="3">Three</option>
                            </select>
                        </div>
                        <div class="col-auto">
                            <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
                                <input type="checkbox" class="custom-control-input">
                                <span class="custom-control-indicator"></span>
                                <span class="custom-control-description">Remember my preference</span>
                            </label>
                        </div>
                        <div class="col-auto">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </form>
                
Inline forms
@

                <form class="form-inline">
                    <label class="sr-only" for="inlineFormInputName2">Name</label>
                    <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInputName2"
                           placeholder="Jane Doe">

                    <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
                    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                        <div class="input-group-addon">@</div>
                        <input type="text" class="form-control" id="inlineFormInputGroupUsername2"
                               placeholder="Username">
                    </div>

                    <div class="form-check mb-2 mr-sm-2 mb-sm-0">
                        <label class="form-check-label">
                            <input class="form-check-input" type="checkbox"> Remember me
                        </label>
                    </div>

                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
                
Custom form controls and selects

                <form class="form-inline">
                    <label class="mr-sm-2" for="inlineFormCustomSelectPref">Preference</label>
                    <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelectPref">
                        <option selected>Choose...</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>

                    <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
                        <input type="checkbox" class="custom-control-input">
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">Remember my preference</span>
                    </label>

                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
                
Help text
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

                <label for="inputPassword5">Password</label>
                <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
                <small id="passwordHelpBlock" class="form-text text-muted">
                    Your password must be 8-20 characters long, contain letters and numbers, and must not contain
                    spaces, special characters, or emoji.
                </small>
                
Inline text
Must be 8-20 characters long.

                <form class="form-inline">
                    <div class="form-group">
                        <label for="inputPassword6">Password</label>
                        <input type="password" id="inputPassword6" class="form-control mx-sm-3"
                               aria-describedby="passwordHelpInline">
                        <small id="passwordHelpInline" class="text-muted">
                            Must be 8-20 characters long.
                        </small>
                    </div>
                </form>
                
Disabled forms

                <form>
                    <fieldset disabled>
                        <div class="form-group">
                            <label for="disabledTextInput">Disabled input</label>
                            <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
                        </div>
                        <div class="form-group">
                            <label for="disabledSelect">Disabled select menu</label>
                            <select id="disabledSelect" class="form-control">
                                <option>Disabled select</option>
                            </select>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Can't check this
                            </label>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </fieldset>
                </form>
                

Validation

Custom styles
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.

                <form class="container" id="needs-validation" novalidate>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="validationCustom01">First name</label>
                            <input type="text" class="form-control" id="validationCustom01" placeholder="First name"
                                   value="Mark" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="validationCustom02">Last name</label>
                            <input type="text" class="form-control" id="validationCustom02" placeholder="Last name"
                                   value="Otto" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="validationCustom03">City</label>
                            <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
                            <div class="invalid-feedback">
                                Please provide a valid city.
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="validationCustom04">State</label>
                            <input type="text" class="form-control" id="validationCustom04" placeholder="State"
                                   required>
                            <div class="invalid-feedback">
                                Please provide a valid state.
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="validationCustom05">Zip</label>
                            <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
                            <div class="invalid-feedback">
                                Please provide a valid zip.
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-primary" type="submit">Submit form</button>
                </form>
                
Browser defaults
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.

                <form>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="validationDefault01">First name</label>
                            <input type="text" class="form-control" id="validationDefault01" placeholder="First name"
                                   value="Mark" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="validationDefault02">Last name</label>
                            <input type="text" class="form-control" id="validationDefault02" placeholder="Last name"
                                   value="Otto" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="validationDefault03">City</label>
                            <input type="text" class="form-control" id="validationDefault03" placeholder="City"
                                   required>
                            <div class="invalid-feedback">
                                Please provide a valid city.
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="validationDefault04">State</label>
                            <input type="text" class="form-control" id="validationDefault04" placeholder="State"
                                   required>
                            <div class="invalid-feedback">
                                Please provide a valid state.
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="validationDefault05">Zip</label>
                            <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
                            <div class="invalid-feedback">
                                Please provide a valid zip.
                            </div>
                        </div>
                    </div>

                    <button class="btn btn-primary" type="submit">Submit form</button>
                </form>
                
Server side
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.

                <form>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="validationServer01">First name</label>
                            <input type="text" class="form-control is-valid" id="validationServer01"
                                   placeholder="First name" value="Mark" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="validationServer02">Last name</label>
                            <input type="text" class="form-control is-valid" id="validationServer02"
                                   placeholder="Last name" value="Otto" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="validationServer03">City</label>
                            <input type="text" class="form-control is-invalid" id="validationServer03"
                                   placeholder="City" required>
                            <div class="invalid-feedback">
                                Please provide a valid city.
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="validationServer04">State</label>
                            <input type="text" class="form-control is-invalid" id="validationServer04"
                                   placeholder="State" required>
                            <div class="invalid-feedback">
                                Please provide a valid state.
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="validationServer05">Zip</label>
                            <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip"
                                   required>
                            <div class="invalid-feedback">
                                Please provide a valid zip.
                            </div>
                        </div>
                    </div>

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

                <form class="was-validated">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" required>
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">Check this custom checkbox</span>
                    </label>

                    <div class="custom-controls-stacked d-block my-3">
                        <label class="custom-control custom-radio">
                            <input id="radioStacked1" name="radio-stacked" type="radio" class="custom-control-input"
                                   required>
                            <span class="custom-control-indicator"></span>
                            <span class="custom-control-description">Toggle this custom radio</span>
                        </label>
                        <label class="custom-control custom-radio">
                            <input id="radioStacked2" name="radio-stacked" type="radio" class="custom-control-input"
                                   required>
                            <span class="custom-control-indicator"></span>
                            <span class="custom-control-description">Or toggle this other custom radio</span>
                        </label>
                    </div>

                    <select class="custom-select d-block my-3" required>
                        <option value="">Open this select menu</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>

                    <label class="custom-file">
                        <input type="file" id="file" class="custom-file-input" required>
                        <span class="custom-file-control"></span>
                    </label>
                </form>
                

Custom forms

Custom Checkboxes

                <label class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input">
                    <span class="custom-control-indicator"></span>
                    <span class="custom-control-description">Check this custom checkbox</span>
                </label>
                
Custom Checkboxes
:indeterminate

                <div class="bd-example bd-example-indeterminate">
                    <label class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input">
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">Check this custom checkbox</span>
                    </label>
                </div>
                
Custom Radios

                <label class="custom-control custom-radio">
                    <input id="radio1" name="radio" type="radio" class="custom-control-input">
                    <span class="custom-control-indicator"></span>
                    <span class="custom-control-description">Toggle this custom radio</span>
                </label>
                <label class="custom-control custom-radio">
                    <input id="radio2" name="radio" type="radio" class="custom-control-input">
                    <span class="custom-control-indicator"></span>
                    <span class="custom-control-description">Or toggle this other custom radio</span>
                </label>
                
Custom Disabled

                <label class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" disabled>
                    <span class="custom-control-indicator"></span>
                    <span class="custom-control-description">Check this custom checkbox</span>
                </label>

                <label class="custom-control custom-radio">
                    <input id="radio3" name="radioDisabled" type="radio" class="custom-control-input" disabled>
                    <span class="custom-control-indicator"></span>
                    <span class="custom-control-description">Toggle this custom radio</span>
                </label>
                
Stacked

                <div class="custom-controls-stacked">
                    <label class="custom-control custom-radio">
                        <input id="radioStacked3" name="radio-stacked" type="radio" class="custom-control-input">
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">Toggle this custom radio</span>
                    </label>
                    <label class="custom-control custom-radio">
                        <input id="radioStacked4" name="radio-stacked" type="radio" class="custom-control-input">
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">Or toggle this other custom radio</span>
                    </label>
                </div>
                
Select Menu

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

                <label class="custom-file">
                    <input type="file" id="file2" class="custom-file-input">
                    <span class="custom-file-control"></span>
                </label>
                
TODAY
Monday
18 th Sep
Events

Group Meeting

In 32 Minutes, Room 1B

Public Beta Release

11:00 PM

Dinner with David

17:30 PM

Q&A Session

20:30 PM

Notes

Best songs to listen while working

Last edit: May 8th, 2015

Useful subreddits

Last edit: January 12th, 2015

Quick Settings

Notifications

Cloud Sync

Retro Thrusters