Online

Bootstrap - Forms

HTML forms are the integral part of the web pages and applications, but styling the form controls manually one by one with CSS are often boring and tedious. Bootstrap greatly simplifies the process of styling and alignment of form controls like labels, input fields, selectboxes, textareas, buttons, etc. through predefined set of classes.

Vertical Form Layout

This is the default Bootstrap form layout in which styles are applied to form controls without adding any base class to the <form> element or any large changes in the markup.

Example :-

Result

Horizontal Form Layout

In horizontal form layout labels are right aligned and floated to left to make them appear on the same line as form controls. The horizontal form layout requires the various markup changes from a default form layout.

Example :-

Result

Inline Form Layout

Sometimes you might require to place the form controls side-by-side to compact the layout. You can do this easily by adding the Bootstrap class .form-inline to the <form> element.

Example

Result

Static Form Control

There might be a situation when you need to place just plain text next to a form label instead of a form control. You can do this within a horizontal form layout by using the .form-control-static class on a <p> element, like this:</p>

Example

Result

harrypotter@mail.com

Disabled Fieldsets

Rather than disabling the form controls individually, you can also disable all form controls within a fieldset at once by adding the disabled attribute to the <fieldset> element.

Example

Result

Bootstrap Form Validation States

Bootstrap provides easy to use and powerful mechanism for styling input controls to present different validation states. Bootstrap includes validation styles for error, warning, and success messages. To use, just add the appropriate class to the surrounding .form-group.

Example

Result

Username is available
Password strength: Weak
Please enter a valid email address