Forms

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">
        <input type="file" class="custom-file-input" id="customFile">
        <label class="custom-file-label" for="customFile">Example file input</label>
    </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—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—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—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">
                <option selected>Choose...</option>
                <option>...</option>
            </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—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-4 mr-sm-2" 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>

<script>
    
    (function () {
        "use strict";
        window.addEventListener("load", function () {
            var form = document.getElementById("needs-validation");
            form.addEventListener("submit", function (event) {
                if ( form.checkValidity() == false )
                {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add("was-validated");
            }, false);
        }, false);
    }());
</script>
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>
Select Menu Large Small Sizes
<select class="custom-select custom-select-lg mb-3">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
Select Menu Multiple
<select class="custom-select" multiple>
    <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
<div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
</div>
TODAY
Saturday
1 th Jan
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