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.

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.

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.

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.

Output

Disable Form Element

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

Output

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

Disable Fieldsets Element

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.

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.

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.

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.

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.

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.

Output

Reference
getbootstrap 4.0 form
getbootstrap 3 forms

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.