Individual form controls automatically receive some global styling. All textual
<select> elements with
.form-control are set to
width: 100%; by default. Wrap labels and controls in
.form-group for optimum spacing.
Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use
.input-group with an
.input-group-addon to prepend or append elements to a
Checkboxes and Radio Addons
Button Addons and Buttons with Dropdowns
Buttons in input groups are a bit different and require one extra level of nesting. Instead of
.input-group-addon , you'll need to use
.input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.
Most common form control, text-based input fields. Includes support for all HTML5 types:
Form control which supports multiple lines of text. Change
rows attribute as necessary.
Checkboxes and Radios
Use the default option, or add
multiple to show multiple options at once.
Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add
.has-success to the parent element. Any
.help-block within that element will receive the validation styles.
Set heights using classes like
.input-lg, and set widths using grid column classes like