Bootstrap Forms

• All the form controls like inputs, selects and textareas used by default 100% width in Bootstrap. You will have to need set a width on the form controls as per your design requirements.
• You can hide the labels of the inline forms using the class “.sr-only”.

Horizontal form

Horizontal form stands separately as of the others not only in the wrap of markup, other than also in the appearance of the form. Uses the horizontal layout to make a form that, do the below mentioned steps:

• Add this class of .form-horizontal to the main tag<form>.

• Wrap your labels and input tags in a <div> and use class .form-group. This is required for best possible spacings in the controls.

• Use the class of “.control-label” for the labels.

Supported Form Controls

Bootstrap also supports the most known form controls mainly input, textarea, checkbox, radio, and select.

Inputs

The commonly used text field of form is the input type is text where users can enter most of the necessary form data. Bootstrap offers support for all HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Appropriate type declaration of input fields is necessary to make them fully styled.

Textarea

The textarea control is used when you require more than one lines for user input just like message, comments etc. As per your requirements change attribute of rows attribute like fewer rows = smaller box, more rows = bigger box.

CheckBoxes and Radios

Checkboxes are used for multiple choices and radio buttons are single choice from many, both are great when you would like users to select from a list of current available options.

• While making a form, use checkbox if you have to the visitor to choose multiple numbers of options from a list and use radio if you would like to bind the user to just one choice.

  The following example displays default type:

  1

• Use these class .checkbox-inline or .radio-inline for the series of checkboxes or radio buttons for controls display them on the same line.

  The following example shows inline type:

  1

Selects

The <select> tag is used when you would like to give permission the user to select one option from multiple choices. By default it allows only one selection but use “multiple” parameter shows more than one options at once.

• Use <select> tag for list options with which the user is familiar.

  The following example shows select type:

  1

• Use multiple=”multiple” parameter to allow the user to select more than one option.

  The following example shows select type with multiple parameter:

  1

Static control

This class .form-control-static use on a <p> tag, whenever you require showing plain or simple text very next to a label within the horizontal form.

Form Control States

Bootstrap is also offering different classes for form validation and styling for disabled inputs. Just like in the adding the :focus state i.e. when user clicks into the input or tabs then its works.

Input focus

When :focus event active on input then drop shadow applied on that and removed border/outline of input. Below mentioned example will show that how to work this.

Disabled inputs

If you want to apply disable state in input type there is a very simple way for this. Add the attribute of disabled, this attribute will not only apply disable property even it will also change the background color, text color and also change the cursor of mouse when it hovers over that input type. Following example shows that how this state will work on form controls.

Disabled fieldsets

If you add this attribute of disabled on the