Bootstrap Form

tutorial and example
tutorial and example

Bootstrap form s is used to create responsive form with horizontally and vertically. It controls the awesome form style automatically.

There are various form controls like <input>, <textarea>,<select> and many more . It is used with its class .form-control. It is default 100% width.

In Bootstrap, there are three type of form layouts:

  • Vertical form (this is default)
  • Horizontal form
  • Inline form

There are some rules of the bootstrap form:

  • We have to add labels and form controls in <div class=”form-group”>.
  • After that we can includer the class .form-control to all the textual like <input>,<select>, and <textarea>.

Bootstrap Vertical Form

It is default form of bootstrap. The given example will show you how to implement the example.

Let us see an example of Bootstrap Vertical Form:

Try Now

Bootstrap Inline Form

In Bootstrap inline forms, we can create inline form by using its elements like inline, left-aligned, and labels are along side.

While creating inline form we can add .form-inline class to the <form> element.

Note: We can apply it within viewports. ( 769px wide).

Let us see an example of Bootstrap Vertical Form:

Try Now

Note: W can hide level for all devices by using .sr-only class.

Bootstrap Horizontal Form

In bootstrap horizontal form, we can create horizontal form. We have to include some additional rules that are given below:

Let us see an example of Bootstrap Horizontal Form:

Try Now

Note: We can align the position of the form control and level by using offset. Th given above example will help us in button.