Home » Bootstrap Form

Bootstrap Forms

In Bootstrap, there are three types of form layouts:

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

Bootstrap Form Rules

There are three standard rules for these 3 form layouts:

  • Always use <form role=”form”> (helps improve accessibility for people using screen readers)
  • Wrap labels and form controls in <div class=”form-group”> (needed for optimum spacing)
  • Add class .form-control to all textual <input>, <textarea>, and <select> elements

1) Bootstrap Vertical Form (Default)

Test it Now

2) Bootstrap Inline Form

In Bootstrap Inline forms, all elements are inline, left-aligned, and the labels are alongside.

This example is only applied to forms within viewports that are at least 768px wide!


Test it Now

3) Bootstrap Horizontal Form

You have to add some additional rules if you want to create a horizontal form.

Additional rules for a horizontal form:

  • Add class .form-horizontal to the <form> element
  • Add class .control-label to all <label> elements


Test it Now

Bootstrap 4 Forms

In Bootstrap4, form controls automatically receive some global styling with Bootstrap.

All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.

Stacked (full-width) form:

Bootstrap 4 provides full width stacked forms.


Let's take an example to create a stacked form with two input fields, one checkbox, and a submit button.

Test it Now

Next TopicBootstrap Alert

You may also like