Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms with the help of Bootstrap Forms.
Overview
Bootstrap's form controls expand on Bootstrap Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.
Be sure to use an appropriate type attribute on all inputs (e.g., email for
email address or number for numerical information) to take advantage of newer input
controls like email verification, number selection, and more.
For more information, see Bootstrap Forms
Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for documentation on required classes, form layout, and more.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Form controls
Textual form controls—like <input>s, <select>s, and <textarea>s—are
styled with the .form-control class. Included are styles for general appearance, focus
state, sizing, and more.
Be sure to explore our custom forms to further style
<select>s.
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
For file inputs, swap the .form-control for .form-control-file.
<form>
<div class="form-group">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</form>
<div class="custom-file">
<input type="file" id="customFile" class="custom-file-input">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
Custom range input
<input type="range" class="custom-range">
Sizing
Set heights using classes like .form-control-lg and .form-control-sm.
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="custom-select custom-select-lg">
<option>Large select</option>
</select>
<select class="custom-select">
<option>Default select</option>
</select>
<select class="custom-select custom-select-sm">
<option>Small select</option>
</select>
Disabled fields
Use disabled attribute for .form-controls
<!-- Input -->
<input type="text" class="form-control" placeholder="Disabled" disabled="">
<!-- End Input -->
<!-- Custom File Input -->
<div class="custom-file">
<input type="file" id="customFile" class="custom-file-input" disabled="">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
<!-- End Custom File Input -->
<!-- Textarea Field -->
<textarea class="form-control" placeholder="Textarea field" rows="4" disabled=""></textarea>
<!-- End Textarea Field -->
<!-- Select -->
<select class="custom-select" disabled="">
<option>Choose an option</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<!-- End Select -->
<!-- Range Input -->
<input type="range" class="custom-range" disabled="">
<!-- End Range Input -->
Input Group
Use .input-group-prepend and .input-group-append into .input-group
@
@example.com
https://example.com/users/
With textarea
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
</div>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">With textarea</span>
</div>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
Addons
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-primary" type="button" id="button-addon1">Button </button>
</div>
<input type="text" class="form-control" placeholder=""
aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<select class="custom-select">
<option value="1" selected="">All</option>
<option value="2">HTML</option>
<option value="3">CSS</option>
<option value="4">JS</option>
<option value="5">PHP</option>
<option value="6">Vue.js</option>
<option value="7">React</option>
<option value="8">Angular</option>
<option value="9">Ruby</option>
<option value="10">Python</option>
</select>
</div>
<input type="text" class="form-control">
<div class="input-group-append">
<a href="#" class="btn btn-primary d-flex align-items-center">
<i class="nova-search"></i>
</a>
</div>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button" id="button-addon2">Button</button>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="bsCustomCheck1">
<label class="custom-control-label" for="bsCustomCheck1"></label>
</div>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with radio button">
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<div class="custom-control custom-radio">
<input type="checkbox" class="custom-control-input" id="bsCustomRadio1">
<label class="custom-control-label" for="bsCustomRadio1"></label>
</div>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with radio button">
</div>
First and last name
$
0.00
$
0.00
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">First and last name</span>
</div>
<input type="text" aria-label="First name" class="form-control">
<input type="text" aria-label="Last name" class="form-control">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
<div class="input-group-append">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
</div>
Select with addons
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group mb-3">
<select class="custom-select" id="inputGroupSelect02">
<option selected="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="input-group-append">
<label class="input-group-text" for="inputGroupSelect02">Options</label>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-primary" type="button">Button</button>
</div>
<select class="custom-select" id="inputGroupSelect03" aria-label="Example select with button addon">
<option selected="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group">
<select class="custom-select" id="inputGroupSelect04" aria-label="Example select with button addon">
<option selected="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="input-group-append">
<button class="btn btn-primary" type="button">Button</button>
</div>
</div>
Sigmented dropdowns
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-primary dropdown-toggle d-flex align-items-center" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown
<i class="nova-angle-down ml-2"></i>
</button>
<div class="dropdown-menu" style="width: auto">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-append">
<button class="btn btn-primary dropdown-toggle d-flex align-items-center" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown
<i class="nova-angle-down ml-2"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" style="width: auto">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button type="button" class="btn btn-primary">Action</button>
<button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="nova-angle-down"></i>
</button>
<div class="dropdown-menu" style="width: auto">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
<div class="input-group-append">
<button type="button" class="btn btn-primary">Action</button>
<button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="nova-angle-down"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" style="width: auto; position: absolute; transform: translate3d(276px, -195px, 0px); top: 0px; left: 0px; will-change: transform;" x-placement="top-end">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
Merge styles
Use .input-group-merge with .input-group-prepend-merge and .input-group-append-merge for icons and image-icons
<div class="input-group input-group-merge">
<div class="input-group-prepend-merge">
<img class="icon-img" src="../../assets/svg/crypto/bitcoin-cash.svg" alt="Bitcoin Cash">
</div>
<input class="form-control form-control-prepend-img" placeholder="Placeholder" type="text">
</div>
<div class="input-group input-group-merge">
<input class="form-control form-control-append-icon" placeholder="Search" type="text">
<div class="input-group-append-merge">
<i class="nova-search icon-text icon-text-sm"></i>
</div>
</div>
<div class="input-group">
<input type="text" class="form-control form-control-onfocus-inherit bg-transparent small text-muted" value="0xe99356bde974bbe08721d77712168fa070aa8da4" readonly="">
<div class="input-group-append">
<a class="input-group-text bg-transparent text-muted" href="#">
<i class="nova-layers icon-text icon-text-sm"></i>
</a>
</div>
</div>
Use additional .input-group-merge .input-group-merge-btn with .input-group
<div class="input-group input-group-merge input-group-merge-btn">
<input class="form-control" placeholder="https://themes.getbootstrap.com/store/htmlstream/" type="text">
<div class="input-group-merge-append">
<a class="btn btn-primary" href="#">Search</a>
</div>
</div>
Input group sizing
Set heights using classes like .form-control-lg and .form-control-sm.
Small
Default
Large
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
</div>
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
</div>
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>
<div class="input-group input-group-lg mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
</div>
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
</div>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroup-select-sizing-sm">Small</label>
</div>
<select class="custom-select" id="inputGroup-select-sizing-sm">
<option selected="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroup-select-sizing-default">Default</label>
</div>
<select class="custom-select" id="inputGroup-select-sizing-default">
<option selected="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroup-select-sizing-lg">Large</label>
</div>
<select class="custom-select" id="inputGroup-select-sizing-lg">
<option selected="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input-group input-group-sm input-group-merge mb-3">
<div class="input-group-prepend-merge">
<img class="icon-img" src="../../assets/svg/crypto/bitcoin-cash.svg" alt="Bitcoin Cash">
</div>
<input class="form-control form-control-prepend-img" placeholder="Placeholder" type="text">
</div>
<div class="input-group input-group-lg input-group-merge mb-3">
<div class="input-group-prepend-merge">
<img class="icon-img" src="../../assets/svg/crypto/bitcoin-cash.svg" alt="Bitcoin Cash">
</div>
<input class="form-control form-control-prepend-img" placeholder="Placeholder" type="text">
</div>
<div class="input-group input-group-sm input-group-merge mb-3">
<div class="input-group-prepend-merge">
<i class="nova-search icon-text"></i>
</div>
<input class="form-control form-control-prepend-icon" placeholder="Search" type="text">
</div>
<div class="input-group input-group-lg input-group-merge">
<div class="input-group-prepend-merge">
<i class="nova-search icon-text"></i>
</div>
<input class="form-control form-control-prepend-icon" placeholder="Search" type="text">
</div>
Custom checkbox and radios
<div class="custom-control custom-checkbox mb-2">
<input type="checkbox" id="customCheck1" class="custom-control-input" checked>
<label class="custom-control-label" for="customCheck1">Checkbox label</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customCheck2" class="custom-control-input">
<label class="custom-control-label" for="customCheck2">Checkbox label</label>
</div>
<div class="custom-control custom-radio mb-2">
<input type="radio" id="customRadio1" class="custom-control-input" checked="" name="customRadio">
<label class="custom-control-label" for="customRadio1">Checked</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" class="custom-control-input" name="customRadio">
<label class="custom-control-label" for="customRadio2">Checked</label>
</div>
<div class="d-flex flex-wrap mb-3">
<div class="form-check position-relative pl-0 mr-2">
<input type="checkbox" class="form-check-input invisible" id="check1">
<label class="checkbox-text position-relative btn btn-outline-primary form-check-label" for="check1">
<span class="text-unchecked">I Agree</span>
<span class="text-checked">Agreed!</span>
</label>
</div>
<div class="form-check position-relative pl-0 mr-4">
<input type="checkbox" class="form-check-input invisible" id="check2" checked="">
<label class="checkbox-text position-relative btn btn-outline-primary form-check-label" for="check2">
<span class="text-unchecked">I Agree</span>
<span class="text-checked">Agreed!</span>
</label>
</div>
</div>
<div class="d-flex flex-wrap">
<div class="form-check position-relative pl-0 mb-2 mr-2">
<input type="checkbox" class="form-check-input invisible" id="check3">
<label class="checkbox-text position-relative btn btn-outline-secondary form-check-label" for="check3">
<span class="text-unchecked">Copy url</span>
<i class="nova-check icon-text icon-text-xs text--checked mx-3"></i>
</label>
</div>
<div class="form-check position-relative pl-0">
<input type="checkbox" class="form-check-input invisible" id="check4" checked="">
<label class="checkbox-text position-relative btn btn-outline-secondary form-check-label mb-2 mr-2" for="check4">
<span class="text-unchecked">Copy url</span>
<i class="nova-check icon-text icon-text-xs text--checked mx-3"></i>
</label>
</div>
</div>
<div class="form-check position-relative pl-0 mb-3">
<input type="radio" id="check9" class="form-check-input invisible" checked="" name="ExtraLargeSizeRadio">
<label class="checkbox-text position-relative d-flex align-items-center btn btn-outline-primary form-check-label text-left p-2 p-md-3" for="check9">
<span>
<strong class="h5 font-weight-semi-bold mb-1 mb-md-2">Get Started Now for Free</strong>
<small class="form-check-subtext transition-color-0_15 text-muted d-block">Start your free 14-day trial</small>
</span>
<i class="nova-harddrive icon-text icon-text-xl ml-auto"></i>
</label>
</div>
<div class="form-check position-relative pl-0 mb-3">
<input type="radio" id="check10" class="form-check-input invisible" name="ExtraLargeSizeRadio">
<label class="checkbox-text position-relative d-flex align-items-center btn btn-outline-primary form-check-label text-left p-2 p-md-3" for="check10">
<span>
<strong class="h5 font-weight-semi-bold mb-1 mb-md-2">Website Builder</strong>
<small class="form-check-subtext transition-color-0_15 text-muted d-block">Starting at only $3.84/mo*</small>
</span>
<i class="nova-hummer icon-text icon-text-xl ml-auto"></i>
</label>
</div>
<div class="form-check position-relative pl-0">
<input type="radio" id="check11" class="form-check-input invisible" name="ExtraLargeSizeRadio">
<label class="checkbox-text position-relative d-flex align-items-center btn btn-outline-primary form-check-label text-left p-2 p-md-3" for="check11">
<span>
<strong class="h5 font-weight-semi-bold mb-1 mb-md-2">VPS Hosting</strong>
<small class="form-check-subtext transition-color-0_15 text-muted d-block">Starting at only $119/mo*</small>
</span>
<i class="nova-harddrives icon-text icon-text-xl ml-auto"></i>
</label>
</div>
Inline custom checkbox and radios
Group checkboxes or radios on the same horizontal row by adding .form-check-inline to
any .form-check.
<div class="form-group">
<div class="form-check form-check-inline">
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customInlineCheck1" class="custom-control-input">
<label class="custom-control-label" for="customInlineCheck1">Unchecked</label>
</div>
</div>
<div class="form-check form-check-inline">
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customInlineCheck2" class="custom-control-input indeterminate-checkbox" checked="">
<label class="custom-control-label" for="customInlineCheck2">Indeterminate</label>
</div>
</div>
<div class="form-check form-check-inline">
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customInlineCheck3" class="custom-control-input" checked="">
<label class="custom-control-label" for="customInlineCheck3">Checked</label>
</div>
</div>
</div>
$('.indeterminate-checkbox').prop('indeterminate', true)
<div class="form-group">
<div class="form-check form-check-inline">
<div class="custom-control custom-radio">
<input type="radio" id="customInlineRadio1" class="custom-control-input" name="customInlineRadio">
<label class="custom-control-label" for="customInlineRadio1">Unchecked</label>
</div>
</div>
<div class="form-check form-check-inline">
<div class="custom-control custom-radio">
<input type="radio" id="customInlineRadio2" class="custom-control-input indeterminate-checkbox" checked="" name="customInlineRadio">
<label class="custom-control-label" for="customInlineRadio2">Checked</label>
</div>
</div>
<div class="form-check form-check-inline">
<div class="custom-control custom-radio">
<input type="radio" id="customInlineRadio3" class="custom-control-input indeterminate-checkbox" name="customInlineRadio">
<label class="custom-control-label" for="customInlineRadio3">Unchecked</label>
</div>
</div>
</div>
Switches
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>
Validation states
For more inforamation about form validation your can read on Validation page
Valid states
Valid feedback
<div class="u-has-success mb-3">
<input type="text" class="form-control" placeholder="Placeholder">
</div>
<div class="u-has-succes mb-3">
<select class="form-control custom-select">
<option>Choose an option</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<small class="text-success">Valid feedback</small>
</div>
<div class="u-has-success mb-3">
<textarea class="form-control" placeholder="Textarea field" rows="4"></textarea>
</div>
<div class="u-has-success">
<div class="custom-file">
<input type="file" id="customFile" class="custom-file-input">
<label class="form-control custom-file-label" for="customFile">Choose file</label>
</div>
</div>
Invalid states
Invalid feedback
<div class="u-has-error mb-3">
<input type="text" class="form-control" placeholder="Placeholder">
</div>
<div class="u-has-error mb-3">
<select class="form-control custom-select">
<option>Choose an option</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<small class="text-danger">Invalid feedback</small>
</div>
<div class="u-has-error mb-3">
<textarea class="form-control" placeholder="Textarea field" rows="4"></textarea>
</div>
<div class="u-has-error">
<div class="custom-file">
<input type="file" id="customFile" class="custom-file-input">
<label class="form-control custom-file-label" for="customFile">Choose file</label>
</div>
</div>