Bootstrap Forms
Form Controls
Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.
General Controls
Remember, since Bootstrap utilizes the HTML5 doctype, all inputs must have a
type attribute.
Textual Inputs
Here are examples of .form-control applied to each textual HTML5
<input> type.
Form Layouts
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 Groups
The
.form-group class is the easiest way to add some structure to forms. Its only purpose is to provide
margin-bottom around a label and control pairing.
As a bonus, since it’s a class you can use it with <fieldset> s,
<div>s, or nearly any other element.
Inline Forms
Use the
.form-inline class to display a series of labels, form controls, and buttons on a single horizontal row.
Inline Forms custom form controls
Custom form controls and selects are also supported.
Horizontal Forms using the grid
Add the .row class to form groups and use the
.col-*-* classes to specify the width of your labels and controls.
Be sure to add .col-form-label to your
<label>s as well so they’re vertically centered with their associated form controls.
Horizontal form sizes
Grid-based form layouts also support large and small inputs.
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.
Default (stacked)
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with
.form-check.
Inline
Group checkboxes or radios on the same horizontal row by adding
.form-check-inline to any .form-check.
Without Labels
Should you have no text within the
<label>, the input is positioned as you’d expect. Currently only works on non-inline checkboxes and radios.
Static Controls
When you need to place plain text next to a form label within a form, use the
.form-control-static class on an element of your choice.
Inline Forms
Disabled and Readonly States
Add the
disabled boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a
not-allowed cursor. Also, read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
Disabled
Add the disabled attribute to a
<fieldset> to disable all the controls within.
Readonly Inputs
Add the
readonly boolean attribute on an input to prevent modification of the input’s value
Control and Column Sizing
Bootstrap comes with three control form sizes: small, default and large. For column sizing, just wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
Inputs
Set heights using classes like
.form-control-lg, and set widths using grid column classes like .col-lg-*.
Selects
Also .form-control-lg class is used for selects.
Column Sizing
Wrap inputs in grid columns, or any custom parent element.
Validation
Bootstrap includes validation styles for danger, warning, and success states on most form controls. Generally speaking, you’ll want to use a particular state for specific types of feedback: danger, warning and success states.
Form Groups
Here are some examples of the aforementioned classes in action.
First up is your standard left-aligned fields with labels, help text, and validation messaging.
Inline Forms
Those same states can also be used with horizontal forms.
Checkboxes and Radios
Checkboxes and radios are also supported.
Custom Forms
For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.
Checkboxes and Radios
Here are some custom checkboxes and radios examples.
Select Menu
Custom <select> menus need only a custom class,
.custom-select to trigger the custom styles.
File Browser
The file input is the most gnarly of the bunch and require additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.
Input Group
Easily extend form controls by adding text, buttons, or button groups on either side of textual
<input>s.
Basic Example
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
Bootstrap does not support multiple form-controls in a single input group.
Sizing
Add the relative form sizing classes to the
.input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
Checkboxes and Radio Addons
Place any checkbox or radio option within an input group’s addon instead of text.
Multiple Addons
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
Button Addons
Buttons in input groups must wrapped in a
.input-group-btn for proper alignment and sizing. This is required due to default browser styles that cannot be overridden.
Buttons with Dropdowns
Dropdowns buttons in input groups also must be wrapped in a .input-group-btn.