Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-group to behave as grid rows, so no need for .row.
Add .form-inline to your form (which doesn't have to be a <form>) for left-aligned and inline-block controls.
This only applies to forms within viewports that are at least 768px wide.
Examples of standard form controls supported in an example form layout.
Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
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 .radio, .radio-inline, .checkbox, or .checkbox-inline.
Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.
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. Remember to still provide some form of label for assistive technologies (for instance, using aria-label).
Note that many native select menus—namely in Safari and Chrome—have rounded corners that cannot be modified via border-radius properties.
For <select> controls with the multiple attribute, multiple options are shown by default.
When you need to place plain text next to a form label within a form, use the .form-control-static class on a <p>.
We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.
Add the disabled boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a not-allowed cursor.
Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.
Block level help text for form controls.
Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.
You can also add optional feedback icons with the addition of .has-feedback and the right icon.
Feedback icons only work with textual <input class="form-control"> elements.
Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.
Quickly size labels and form controls within .form-horizontal by adding .form-group-lg or .form-group-sm.
Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.