Bootstrap Forms

Bootstrap Forms : Bootstrap provides three types of forms -vertical, horizontal and inline. Based on your requirement you can easily create these forms. Generally creating a form in html and styling them using css is a boring task. Bootstrap forms comes with the rich form elements and well organised layout. You need only add classes to make them beautiful. Thus bootstrap has simplified our task by providing well defined classes for creating form. Here in this tutorial we are going to explain how you can create Forms in Bootstrap. You can also use our online
editor to edit and run the code online.

Bootstrap Forms Example

Bootstrap provides basically three types of forms as below :

1. Vertical Form
2. Horizontal Form
3. Inline Form

Now let us go one by one to understand the bootstrap forms-

Bootstrap Vertical Form

By Default bootstrap creates vertical form, this comes with the bootstrap’s default setting. For Creating bootstrap you need to add following css and role in form elements.

1 – Add Role : First Add Role(form) in Form tag –

2 – Add Form Group Wrapper –

3 – Add Form Input Element – Add .form-control class in form input fields.

Note : By default bootstrap provides 100 % width of input fields

Try it »

Bootstrap Forms - Vertical

Bootstrap Horizontal Form

The predefined class .form-horizontal is used to create horizontal form in bootstrap. Additional class for label elements used is .control-label

1 – Add class .form-horizontal in tag <form> .

2 – Add Class .control-label in labels

Example of Horizontal form is –

Try it »

The above code will produce the following result –

Bootstrap Forms - Horizontal

Bootstrap Inline Form

Bootstrap inline form are used when you need to display form’s all field in single line. The form class .form-inline is used to generate the inline form. The simple example can be search box with search button or login form in a single line.

Try it »

The Above code will produce the following output-

Bootstrap Forms - Inline

Leave a Reply