Twitter Bootstrap Forms
To Create styled forms with various states
Twitter Bootstrap: Basic Form
1. Bootstrap enables user to create forms using simple HTML markups with extended class to add different styles to the form.
2. All form elements <input> <textarea> <select> with class .form-control are set to width of 100% by default.
3. Labels and controls can be grouped using class .form-group for optimum utilization of space.
Example: Twitter Bootstrap Basic Forms
Give it a TRY! »Twitter Bootstrap: Inline Forms
1. An Inline form controls can be created using class="form-inline" with element <form>.
Its applicable only to forms with viewport sizes greater than 768px
Example:Twitter Bootstrap Inline Form Controls
Give it a TRY! »Twitter Bootstrap: Horizontal Forms
1. A horizontal form group can be created by adding .form-horizontal to the element <form>.
2. It forces elements using .form-group class to behave as grid rows, hence no need to use .row
Example:Twitter Bootstrap Hover Tables
Give it a TRY! »Twitter Bootstrap: Form Input
1. The most common form control is text based input field, the fields will be styled completely only if the type property is declared .
2. It supports all HTML5 types: datetime-local , date , month , time , week , number , email , url , search , tel , color.
Example:Twitter Bootstrap Form Input
Give it a TRY! »Twitter Bootstrap: Form Textarea
1. The <textarea> is a form control which can contain multiple line of text.
The size of the textarea is specified using the attributed row
Example:Twitter Bootstrap Textarea for Inputs
Give it a TRY! »Twitter Bootstrap: CheckBox and Radio Buttons
1. Checkbox allows users to select multiple options while radio buttons allow only a single input.
2. To define a checkbox or radio button use the attribute type , just like normal HTML code.
3. Inline checkbox or radio button can be created using .checkbox-inline or .checkbox-radio class.
Example:Twitter Bootstrap CheckBox and Radio Options
Twitter Bootstrap: Form Selects
1.A select is used to enable users to pick from multiple options, but by default it allows only a single value
2. To allow users to select more than one options use multiple="multiple" within the <select> element.
Example:Twitter Bootstrap Selects Form
Twitter Bootstrap: Static Form Controls
1. In order to place a plain text adjacent to a form label within a horizontal form group, use class .form-control-static within the element <p>.
Example:Twitter Bootstrap Static Form Controls
Twitter Bootstrap: Disabled Form Inputs
1. To disable a form control add attribute disabled , it even changes the appearance the cursor style
Example:Twitter Bootstrap Disabled form Inputs
Twitter Bootstrap: Disabled Form Fieldsets
1.The entire fieldset can be disabled by adding the class disabled to the <fieldset> element .
Example:Twitter Bootstrap Disabled Form Fieldsets
Twitter Bootstrap: Form with Validation States
1. The Bootstrap has three validation styles to show error, warning and success states on a form control.
2. To use the feature, add .has-error , .has-warning and .has-success to the parent element.
3. Use any .control-label , .form-label and .help-block within the element to recieve the validation styles.
Example:Twitter Bootstrap Validation States
Twitter Bootstrap: Forms Validation States with Glyphicon Icons
1. You can even add a feedback icon using gylphicon icons by adding an additional class within the <span> attribute or any other element .
2. The positioning of the icon can be done setting right: 0; to an appropriate pixel.
Example:Twitter Bootstrap Form Validation states using glyphicon Icons
Twitter Bootstrap: Icons with Inline and Horizontal Forms
1. Validation icons can be even added on horizontal and inline forms .
Example:Twitter Bootstrap Icons with Horizontal and Inline Forms
Inline Form
Twitter Bootstrap: Sizing of Form Controls
1. The height of the input controls can be set using class .input-lg for large and .input-sm for small input control.
2. The width of the form control is specified using grid column class like .col-lg-*.
Example:Twitter Bootstrap Sizing of form controls
Twitter Bootstrap: Column Sizing of Inputs
1. The size of the columns can be specified wrapping inputs in grid columns or any other parent element, to have the desired width.
Example:Twitter Bootstrap column-Sizing form inputs
Twitter Bootstrap : Help Blocks
1. A held block's purpose is to guide the user about the details of the form input, add .help-block to create this text block.