Search within TutorialsPark

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

Give it a TRY! »

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

Give it a TRY! »

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

Give it a TRY! » Note: It creates a thick grey border to the left side.

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

Give it a TRY! » Note: It creates a thick grey border to the left side.

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

Give it a TRY! »

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

Give it a TRY! »

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

Give it a TRY! »

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

Give it a TRY! »

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

Give it a TRY! »

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

Give it a TRY! »

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.

Example:Twitter Bootstrap Help Blocks

Give it a TRY! »