Javatpoint Logo
Javatpoint Logo

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!

Example:

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

Example:

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.

Example:

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




Help Others, Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA