Input Text

Use input type="text".

Input Password

Use input type="password".

Input Email

Use input type="email".

Input Url

Use input type="url".

Input Telephone

Use input type="tel".

Input Search

Use input type="search".

Input Range

Use input type="range".

Input Custom Range

Use input type="range".

Input With Label 

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

Form controls

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 

<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 smalltag and .text-mutedfor helper text.

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 smalltag inside the spantag with .badge

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-100class to the spantag to make block.

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

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

<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 

<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 

<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 

<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 

<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 

<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 

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