Basic
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 small
tag and .text-muted
for 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
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.
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