Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.
Here are examples of .form-control applied to each textual HTML5 <input> type.
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.
Use the
.form-inline
class to to display a series of labels, form controls, and buttons on a single horizontal row.
Visible labels
Hidden labels
For more structured form layouts, you can utilize Bootstrap’s predefined grid classes (or mixins). Add the
.row
class to form groups and use the
.col-*
classes to specify the width of your labels and controls. To vertically center the labels with the textual inputs—nearly anything with
.form-control
—use the
.form-control-label
class.
When you need to place plain text next to a form label within a form, use the
.form-control-static
class on a
<p>
.
Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
Default (stacked)
Inline
Add the
disabled
boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a
not-allowed
cursor.
Set heights using classes like
.form-control-lg
, and set widths using grid column classes like
.col-lg-*
.
Column sizing
Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.
Bootstrap includes validation styles for danger, warning, and success states on form controls. To use, add
.has-warning
,
.has-danger
, or
.has-success
to the parent element. Any
.form-control-label
,
.form-control
, and
.text-help
within that element will receive the validation styles.
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.
