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
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 –
The above code will produce the following result –
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.
The Above code will produce the following output-
