Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Overview
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.
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-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
Option one is this
<span class="form-check-sign">
<span class="check"></span>
</span>
</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="[email protected]">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control selectpicker" data-style="btn btn-link" 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 selectpicker" data-style="btn btn-link" 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-file-upload
and .form-file-simple
or .form-file-multiple
.
<div class="form-group form-file-upload form-file-simple">
<input type="text" class="form-control inputFileVisible" placeholder="Simple chooser...">
<input type="file" class="inputFileHidden">
</div>
<div class="form-group form-file-upload form-file-multiple">
<input type="file" multiple="" class="inputFileHidden">
<div class="input-group">
<input type="text" class="form-control inputFileVisible" placeholder="Single File">
<span class="input-group-btn">
<button type="button" class="btn btn-fab btn-round btn-primary">
<i class="material-icons">attach_file</i>
</button>
</span>
</div>
</div>
<div class="form-group form-file-upload form-file-multiple">
<input type="file" multiple="" class="inputFileHidden">
<div class="input-group">
<input type="text" class="form-control inputFileVisible" placeholder="Multiple Files" multiple>
<span class="input-group-btn">
<button type="button" class="btn btn-fab btn-round btn-info">
<i class="material-icons">layers</i>
</button>
</span>
</div>
</div>
Readonly
Add the readonly
boolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
Examples
<div class="form-group label-floating has-success">
<label class="control-label">Success input</label>
<input type="text" value="Success" class="form-control" />
<span class="form-control-feedback">
<i class="material-icons">done</i>
</span>
</div>
<div class="form-group label-floating has-danger">
<label class="control-label">Error input</label>
<input type="email" value="Error Input" class="form-control" />
<span class="material-icons form-control-feedback">clear</span>
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">group</i>
</span>
</div>
<input type="text" class="form-control" placeholder="With Material Icons">
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-group"></i>
</span>
</div>
<input type="text" class="form-control" placeholder="With Font Awesome Icons">
</div>
Checkboxes and radios
Default checkboxes and radios are improved upon with the help of .form-check
, a single class for both input types that improves the layout and behavior of their HTML elements. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
Disabled checkboxes and radios are supported, but to provide a not-allowed
cursor on hover of the parent <label>
, you’ll need to add the .disabled
class to the parent .form-check
. The disabled class will also lighten the text color to help indicate the input’s state.
Default (stacked)
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check
.
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
Option one is this and that—be sure to include why it's great
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="" disabled>
Option two is disabled
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-radio">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" >
Radio is off
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-radio">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" checked>
Radio is on
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-radio disabled">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios1" value="option1" disabled>
Disabled radio is off
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
Inline
Group checkboxes or radios on the same horizontal row by adding .form-check-inline
to any .form-check
.
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-inline disabled">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled> 3
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-radio form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-radio form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
<div class="form-check form-check-radio form-check-inline disabled">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled> 3
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
Layout
Since Bootstrap applies display: block
and width: 100%
to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.
Form grid
More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
<form>
<div class="row">
<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>
</form>
Form row
You may also swap .row
for .form-row
, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.
<form>
<div class="form-row">
<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>
</form>
More complex layouts can also be created with the grid system.
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-3">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2 ml-auto">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
Check me out
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Disabled forms
Add the disabled
boolean attribute on an input to prevent user interactions and make it appear lighter.
Add the disabled
attribute to a <fieldset>
to disable all the controls within.
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option></option>
</select>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
Can't check me out
<span class="form-check-sign">
<span class="check"></span>
</span>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
Caveat with anchors
By default, browsers will treat all native form controls (<input>
, <select>
and <button>
elements) inside a <fieldset disabled>
as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <a ... class="btn btn-*">
elements, these will only be given a style of pointer-events: none
. As noted in the section about disabled state for buttons (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn’t fully supported in Opera 18 and below, or in Internet Explorer 10, and won’t prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
Cross-browser compatibility
While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don’t fully support the disabled
attribute on a <fieldset>
. Use custom JavaScript to disable the fieldset in these browsers.
File browser
<div class="fileinput fileinput-new text-center" data-provides="fileinput">
<div class="fileinput-new thumbnail img-raised">
<img src="http://style.anu.edu.au/_anu/4/images/placeholders/person_8x10.png" rel="nofollow" alt="...">
</div>
<div class="fileinput-preview fileinput-exists thumbnail img-raised"></div>
<div>
<span class="btn btn-raised btn-round btn-default btn-file">
<span class="fileinput-new">Select image</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="..." />
</span>
<a href="javascript:;" class="btn btn-danger btn-round fileinput-exists" data-dismiss="fileinput"><i class="fa fa-times"></i> Remove</a>
</div>
</div>
If you want to see more examples and properties please check the official Bootstrap Documentation.