Bootstrap Form

What is Bootstrap Form

The bootstrap form provides many useful classes that contain the added CSS properties automatically applies to form controls on addition of the classes.

Forms are the web content you can use to get the user input data. But, creating a beautiful looking form is the tedious task for many designers.

How to Create Bootstrap Form Responsive Layouts

To create a Bootstrap form, you must know the useful bootstrap classes and the various bootstrap form layouts.

There are three types of bootstrap form layouts given below.

  • Vertical Form(Simple or default form layout)
  • Inline Form
  • Horizontal Form

In this tutorial, I have added all the useful class examples, you can check and remember each class to use in various form elements.

See details of each form layout given below.

Bonus: download a Free Bootstrap CHEAT SHEET that will show you 20+ most important examples to learn in Bootstrap.

Bootstrap Vertical Form(Basic or Default Form)

This is a simple form layout with no class for the HTML form tag.

To create this form put each individual form control inside the class .form-group and add .form-control class to textboxes, select box and textarea.

See the example given below.

Test it Live

Output




The above example creates a bootstrap form with left align elements. Each input text boxes added with the labels.

Here, I have used button .btn-primary class to create a button, see bootstrap button page to get more button classes and add beautiful buttons to your project.

Bootstrap Inline Form

Bootstrap inline forms are the forms in which form controls and labels are placed inline and left aligned.

You just need to put .form-inline as the base class of the form tag and add rest other classes of vertical or default form given above.

Test it Live

Output




Horizontal Bootstrap Form

To create a horizontal form layout, you have the follow the below given rules.

  • Put .form-horizontal class in the form tag.
  • Put form controls label and input tags inside the .form-group class.
  • Add .control-label class to the label and put input text inside the column grid div tag. The Rest of class are same as the default form classes.

Check out the below form to understand the horizontal form layout.

Test it Live

Output

Disable Single Form Element

If you want to disable the input and the select boxes, you need to add the attribute .disabled as given below.

Test it Live

Output

To check the effect of the disabled item, just hover the input text given above.

Disable All Form Elements Using Fieldset Tag

If you want to disable all the items of a form, you don’t need to do this individually to all the element. Use the fieldset tag with the attribute .disabled. This will make all the elements appear as in the disable state.

Test it Live

Output




Read Only State of Form input

If you want to create a read only input type form control, you have to add the attribute .readonly to it. This class makes the input controls prevent user inputs.

You can see the placeholder or value of the text box but not able to make any modifications. However, you can click on the input box which was not allowed in the disabled input box given above.

Test it Live

Output

Place Help text With Form Control

Sometimes, you need to put a help block text with the input boxes to help users understand the required input data. Bootstrap provides a class .help-block to use as the class of the span element and place it after the input form control types.

See the example below contains the help block that may extend beyond the new line.

Test it Live

Output


This is the help text that may extend beyond the new line.

Validation State of Form Input

There are three validation state classes you can use to show the states of the input type controls. You have to add these classes to the form tag. The description of these classes are given below

Class name Description
.has-success Display the success message with the input box.
.has-warning Specify the warning message with the input box.
.has-error Display the error message with the input box.

See the below example to find the style of each class with the input box and the help block.

Test it Live

Output



Enter text only


Enter a valid email id


Enter numbers and text only


Add Feedback Icons to Form input

You can add a feedback icon to your input box by adding .has-feedback in the form tag. In addition to this, you will also have to add a glyphicon with the glyphicon icon class and .form-control-feedback class.

Test it Live

Output




Enter text only



Enter a valid email id



Enter numbers and text only


Control Height Sizing of Input and Select Box in Bootstrap Form

There are three bootstrap classes you can use to control the height of the input boxes and select boxes. These classes are given below the description.

Class name Description
.input-lg Use this class to create a large size input box.
.input-md If you want to create a medium input box, you can use this class.
.input-sm Create a small input box by using this class with input form controls.

See the example below to see the height changes made by above given classes.

Test it Live

Output

DOWNLOAD Free Bootstrap CHEAT SHEET