6 Bootstrap forms: basic, horizontal, inline, validation etc.

6 Bootstrap forms: basic, horizontal, inline, validation etc.

How to create Bootstrap form?

The Bootstrap framework includes a number of CSS classes related to building HTML forms with Bootstrap in your web documents. By simply including classes into <form> tag or <input> types you can build beautiful forms for the website that are responsive to all kind of devices as well.

In this tutorial, we will show you a number of classes provided by Twitter Bootstrap to build forms horizontally, vertically or inline along with online examples that you can see by clicking “Experience it online”.

A few CSS classes related to forms in Bootstrap are:

  • form-group (that you can use in the Div for proper spacing of labels and form controls)
  • form-control (applies to form controls for 100% available width)
  • form-inline (Use to add inline-block controls)
  • form-horizontal

and others. Following are a few examples of using these classes.

A general form in Bootstrap example

The example creates a basic bootstrap form with different input types including textbox, checkbox, a textarea that takes 100% available space and a submit button.

Bootstrap form basic

Experience this online

You can see, the form-group class is used. You can use a placeholder in the form field to show pre-defined text as we used in the Login, password and textarea fields.

A Bootstrap inline login form example

Following is an example with login form fields. This is only front-end with the form-inline class used to create an inlined form. You can set target page in the form and script can process entered information written in PHP, Ruby on Rails, JSP etc.

Bootstrap form inline

Experience this online

A Bootstrap horizontal form example

The following example uses the form-horizontal class in the <form> tag that creates a horizontal form. You can use predefined bootstrap grid classes to align labels and form elements like textboxes, checkbox, radio etc. The form is created for a basic “create account” page with the fields: name, email, password, the gender. These fields use text boxes, checkbox, dropdown and a button.

Bootstrap form

Experience this online

Autofocus example in a form

You can use autofocus attribute in a form element to make it focused as it loads. In the following example, the email field is auto-focused with a blue shadow outline, though its number is third in the form.

Experience this online

Bootstrap form validation example

One of the cool features is to show the user validation messages in your web pages. For example, as filling the forms for the email, you might have noticed a Cross sign, that this email already exists. Similarly warning messages like weak passwords, success messages for password and re-enter the password can be shown while users are filling the forms and that really adds great UI experience.

With Bootstrap, you just have to include classes as shown in the example below:

Bootstrap form validation

Experience this online

Bootstrap radio button example

Following example shows horizontal radio button in Bootstrap.

Experience this online

Useful Reading: Twitter Bootstrap Tutorial | Bootstrap table| Bootstrap CSS