Forms – Bootstrap


Forms

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](https://github.com/TroyB12/Pictures/blob/master/Inline%20Form2.PNG)

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: ![](https://siamcomm.com/wp-content/uploads/2017/10/Forms-·-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](http://getbootstrap.com/docs/4.0/components/forms/) ![Inline Form 3](https://github.com/TroyB12/Pictures/blob/master/Inline%20Form3.PNG) #### 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.