Forms – Bootstrap


Bootstrap framework provides a form feature which you can use to create beautiful html forms easily. Using the Bootstrap form gives each individual form element a unified global style. Bootstrap form adds the right spacing and look to each element.

Each Bootstrap form element should have a class form-control. This class is how Bootstrap knows which elements to style. All textual elements like input, textarea and select that have the form-control class will have 100% width by default.

There are two types of Bootstrap forms, which are:

  • Inline form – creates the form on a single line. Useful for login forms in a nav bar
  • Horizontal form – creates a form with each element in a different row

Example of a basic form

“`html Email address Password File input

Example block-level help text here. Check me out Submit

## Example of an inline form

html Name Email Send invitation

## Example of horizontal form

html Email Password Remember me Sign in

![Inline Form 2](

html Amount (in dollars) $ .00 Transfer cash

Bootstrap forms allow the programmer to use classes to easily make HTML forms presentable and responsive. Take the following simple form: ![](·-Bootstrap.png)

html Email address We’ll never share your email with anyone else. Password Check me out Submit

Individual form fields and the associated labels should be wrapped in a `<div>` with a class of `form-group`. One exception to this is when using a checkbox field where `form-check` should be used instead of `form-group`. The `<input>` tag should be given a class of `form-control`. The `<button>` tag should be given the classes of `btn btn-primary`. #### More Information: <!-- Please add any articles you think might be helpful to read before writing the article --> [The official BootStrap documentation is very helpful]( ![Inline Form 3]( #### Horizontal Form In combination with Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding `.form-horizontal` to the form. Doing so changes `.form-group`s to behave as grid rows, so no need for `.row`.

html Email Password Remember me Sign in


Horizontal Form

Additional Resources

This article needs improvement. You can help improve this article. You can also write similar articles and help the community.