- UI Elements
- Forms
Default form
Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.
Checkboxes
Beautify Radio and Checkbox with pure CSS. Add the class .magic-checkbox or .magic-radio
for amazing results.
Inline Form
Add .form-inline to your form (which doesn't have to be a <form>) for left-aligned and inline-block controls.
Validation states
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.
A block of help text that breaks onto a new line and may extend beyond one line.
With icons
(success)
(warning)
(error)
@
(success)
Supported controls
| Title | Result | Description |
|---|---|---|
| Input - Text | 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, color,
|
|
| Input - Pasword | ||
| Input - Datetime | ||
| Input - Email | ||
| Input - Number | ||
| Input - Color | ||
| Textarea | Form control which supports multiple lines of text. Change rows attribute as necessary. | |
| Selects | Note that many native select menus—namely in Safari and Chrome—have rounded corners that cannot be modified via border-radius properties.
|
|
| Static control | When you need to place plain text next to a form label within a form, use the
.form-control-static class on a
. |
|
| Disabled state | Add the disabled boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a not-allowed cursor.
|
|
| Readonly state | 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.
|
|
| Help text | A block of help text that breaks onto a new line and may extend beyond one line. | Block level help text for form controls. |
| Control sizing - Large | Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*. |
|
| Control sizing - Small | Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*. |