Input Text
Input Password
Input Email
Input Url
Input Telephone
Input Search
Input 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 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="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="visually-hidden">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="visually-hidden">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="visually-hidden">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">
I am the helper text.
</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="mb-3">
<input class="form-control file-upload-input" type="file" id="formFile">
</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-group mb-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Can't check this
</label>
</div>
</div>
<button type="submit" class="btn btn-primary mt-0">Submit</button>
</fieldset>
</form>
Custom
Checkboxes
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="customCheck1">
<label class="form-check-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="form-select" aria-label="Default select example">
<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="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<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="form-select form-select-sm" aria-label=".form-select-sm example">
<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="form-select" multiple aria-label="multiple select example">
<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="form-select" size="3" aria-label="size 3 select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Copyright © 2022 DesignReset, All rights reserved.
Coded with