#### Input Text

Use input `type="text"`.

Text

#### Input Password

Use input `type="password"`.

Password

#### Input Email

Use input `type="email"`.

Email

#### Input Url

Use input `type="url"`.

Url

#### Input Telephone

Use input `type="tel"`.

Telephone

#### Input Search

Use input `type="search"`.

Search

#### Input Range

Use input `type="range"`.

Range

#### Input Custom Range

Use input `type="range"`.

Custom Range Example range

#### Input With Label

Full Name

    <div class="form-group">
        <label for="exampleFormControlInput1">Full Name</label>
        <input type="text" class="form-control" id="exampleFormControlInput1" value="Alan Green">
    </div>

#### Form controls

Email address
Example select
Example multiple select
Example textarea
Example file input

#### Form Grid Layouts

#### Form grid

    <form>
        <div class="row mb-4">
            <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>
        <input type="submit" name="time" class="btn btn-primary">
    </form>

#### Form row

    <form>
        <div class="form-row mb-4">
            <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>
        <input type="submit" name="time" class="mb-4 btn btn-primary">
    </form>

#### Form groups

Example label
Another label

    <form>
        <div class="form-group mb-4">
            <label for="formGroupExampleInput">Example label</label>
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
        </div>
        <div class="form-group mb-4">
            <label for="formGroupExampleInput2">Another label</label>
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
        </div>
        <input type="submit" name="time" class="btn btn-primary">
    </form>

#### Column sizing

    <form>
        <div class="form-row mb-4">
            <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>
        <input type="submit" name="time" class="mb-4 btn btn-primary">
    </form>

#### Helper Text

#### Input with help text ( Default Left)

Use `small` tag and `.text-muted` for helper text.

Email address I am the helper text.

    <div class="form-group">
        <p>Use <code>small</code> tag and <code>.text-muted</code> for helper text. </p>
        <label for="h-text1" class="sr-only">Email address</label>
        <input type="text" class="form-control" id="h-text1" aria-describedby="h-text1" placeholder="">
        <small id="sh-text1" class="form-text text-muted">I am the helper text.</small>
    </div>

#### Input with badge help text (Default Left)

Wrap the `small` tag inside the `span` tag with `.badge`

Email address
I am the helper text.

    <div class="form-group">
        <p>Wrap the <code>small</code> tag inside the <code>span</code> tag with  <code>.badge</code></p>
        <label for="h-text4" class="sr-only">Email address</label>
        <input type="text" class="form-control" id="h-text4" aria-describedby="h-text4" placeholder="">
        <div class=" mt-1">
            <span class="badge badge-primary">
                <small id="sh-text4" class="form-text mt-0">I am the helper text.</small>
            </span>
        </div>
    </div>

#### Input with block badge help text (Default Left)

Use `.w-100` class to the `span` tag to make block.

Email address
I am the helper text.

    <div class="form-group">
        <p>Use <code>.w-100</code> class to the <code>span</code> tag to make block.</p>
        <label for="h-text7" class="sr-only">Email address</label>
        <input type="text" class="form-control" id="h-text7" aria-describedby="h-text7" placeholder="">
        <div class="mt-1">
            <span class="badge badge-primary w-100">
                <small id="sh-text7" class="form-text mt-0 text-left">I am the helper text.</small>
            </span>
        </div>
    </div>

#### Inline Help text

Password Min 8-20 char

    <form class="form-inline mb-4">
        <div class="form-group  d-block text-left">
            <label for="inputPassword6" class="d-block">Password</label>
            <input type="password" id="inputPassword6" class=" form-control mt-2" aria-describedby="passwordHelpInline">
            <small id="passwordHelpInline" class="text-muted">
                Min 8-20 char
            </small>
        </div>
    </form>
    <input type="submit" name="time" class="btn btn-primary">

#### Sizing

#### Input Fields

Large Input
Default Input
Small Input

    <!-- Large Input -->
    <div class="form-group">
        <label for="exampleFormControlInput1">Large Input</label>
        <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
    </div>

    <!-- Default Input -->
    <div class="form-group">
        <label for="exampleFormControlInput1">Default Input</label>
        <input class="form-control" type="text" placeholder="Default input">
    </div>

    <!-- Small Input -->
    <div class="form-group">
        <label for="exampleFormControlInput1">Small Input</label>
        <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
    </div>

#### Select Field

    <!-- Large Input -->
    <select class="form-control form-control-lg">
        <option>Large select</option>
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
    </select>

    <!-- Default Input -->
    <select class="form-control">
        <option>Default select</option>
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
    </select>

    <!-- Small Input -->
    <select class="form-control form-control-sm">
        <option>Small select</option>
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
    </select>

#### Horizontal form label sizing

Email
Email
Email

    <div class="form-group row  mb-4">
        <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
        </div>
    </div>
    <div class="form-group row mb-4">
        <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
        </div>
    </div>
    <div class="form-group row mb-4">
        <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
        </div>
    </div>

#### Readonly

#### Input Readonly

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

#### HTML Custom File Upload

#### File Upload

Choose file

    <div class="custom-file mb-4">
        <input type="file" class="custom-file-input" id="customFile">
        <label class="custom-file-label" for="customFile">Choose file</label>
    </div>

#### Disabled

#### Disabled Fields

Disabled input
Disabled select menu
Can't check this

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

#### Custom

#### Checkboxes

Check this custom checkbox

    <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck1">
        <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
    </div>

#### Inline radio

Toggle this custom radio
Toggle this custom radio

        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
            <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
            </div>
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
            <label class="custom-control-label" for="customRadioInline2">Toggle this custom radio</label>
        </div>

#### Radio

Toggle this custom radio
Or toggle this other custom radio

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

#### Disabled

Check this custom checkbox
Toggle this custom radio

    <div class="custom-control custom-checkbox mb-3">
        <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
        <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
    </div>

    <div class="custom-control custom-radio mb-4">
        <input type="radio" id="radio3" name="radioDisabled" class="custom-control-input" disabled>
        <label class="custom-control-label" for="radio3">Toggle this custom radio</label>
    </div>

#### Select menu

    <select class="custom-select mb-4">
        <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 sizing

    <select class="custom-select custom-select-lg">
      <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>

#### Multi select

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

#### Select size

    <select class="custom-select mb-4" size="4">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="3">Four</option>
        <option value="3">Five</option>
    </select>