Input Text
Input Password
Input Email
Input Url
Input Telephone
Input Search
Input Range
Input Custom 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.
<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
<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>
Copyright © 2020 DesignReset, All rights Reserved .
Coded with