Bootstrap 4 Forms

Create responsive and consistently styled forms using Bootstrap 4 form classes

Bootstrap 4 provides a default style that is applied across most form controls. It also provides classes for specific purposes.

Basic Form

Use Bootstrap's .form-control class against textual <input>, <textarea>, and <select> elements to apply width: 100% by default.

Wrap labels and controls inside a <fieldset> with the Bootstrap .form-group class applied for optimum spacing. Alternatively, you can use a <div> or other element.

View Output

Inline Form

Use Bootstrap's .form-inline class to make the form elements render as inline-block and left-aligned. Use a spacer utility (eg, mr-sm-2) to add space between elements.

Note that this only applies when the viewport is at least 576 pixels wide. If the following form is not displaying inline, open the preview in a new window. If it still isn't displaying inline, you might need to view the example on a bigger screen.

View Output

Hidden Labels

Labels should always be provided on input fields, otherwise screenreaders will have trouble. You can hide the label if required, by using Bootstrap's .sr-only class.

Here, we use .sr-only to hide the labels. We also add a placeholder attribute to provide a hint to the user as to what to enter. Using the placeholder attribute in this manner is not recommended, as it can cause usability issues.

View Output

Horizontal Form

You can use Bootstrap's grid classes to create horizontal forms. Just specify how many columns each element should span. Specifically, add a .row class to the .form-group and a .col-*-* or .col-* class for each column.

You should also add Bootstrap's .col-form-label class to the <label> element in order to vertically center the label in relation to textual input elements.

View Output

Bootstrap 4 vs Bootstrap 3

There are some minor differences between Bootstrap 4 and Bootstrap 3 when it comes to horizontal forms.

Grids

When using grids for form layout, Bootstrap 4 requires the .row class. This class is not a requirement on Bootstrap 3 forms (although it is still a requirement on Bootstrap 3 grids in general).

Control Labels

Bootstrap 4 uses .col-form-label * when using grids for form layout, whereas Bootstrap 3 forms use .control-label.

* Note that Bootstrap 4 initially used .form-control-label but subesquently changed this to .col-form-label.

The .form-horizontal Class
Bootstrap 4 doesn't require the .form-horizontal class. Bootstrap 3 does require it.

Form Row

You can replace .row with .form-row for a more compact layout.

View Output

Form Legends

When using <legend> elements within your forms, you have the option of adding Bootstrap's .col-form-label class. This class styles the legend to be more like a label.

This can be handy for when presenting a stack of radio buttons or checkboxes within a horizontal form.

View Output

Form Control Size

You can use Bootstrap 4's .form-control-lg and .form-control-sm to increase or decrease the size of an input control.

View Output

Bootstrap 4 vs Bootstrap 3

Bootstrap 4 uses a different class to Bootstrap 3 when it comes to form control size.

Bootstrap 4

Bootstrap 4 forms use .form-control-lg and .form-control-sm to increase or decrease the size of an input control.

Bootstrap 3

Bootstrap 3 forms use .input-lg and .input-sm.

Form Label Size

You can add .col-form-label-sm and .col-form-label-lg to your labels so that the label size matches the form control.

View Output

New in Bootstrap 4

The .col-form-label-sm and .col-form-label-lg classes are new in Bootstrap 4.

Column Size

You can use Bootstrap's grid system to constrain input controls to a desired width.

View Output

Help Text

Bootstrap 4 provides the .form-text class that can be used to indicate help text. You can combine this class with utility classes such as .text-muted.

You should also use the .aria-describedby attribute to associate the help text with the form control. This will ensure that screen readers can announce the help text when the user focuses on the form control.

View Output

Bootstrap 4 vs Bootstrap 3

Bootstrap 4 uses a different class to Bootstrap 3 for displaying help text.

Bootstrap 4

Bootstrap 4 uses .form-text for displaying help text.

Bootstrap 3

Bootstrap 3 forms use the .help-block class.

Static Control

You can use Bootstrap's .form-control-plaintext on a <p> element to present plain text next to a label (eg. instead of using an input field).

View Output

Bootstrap 4 vs Bootstrap 3

Bootstrap 3 used the .form-control-static class for displaying static text. In Bootstrap 4, the .form-control-static class has been replaced with .form-control-plaintext.

Checkboxes & Radio Buttons

Bootstrap 4 provides the .form-check, .form-check-label, .form-check-input, and .form-check-inline classes for displaying checkboxes and radio buttons.

To display the checkboxes or radio buttons stacked, nest each one inside a <div> with the .form-check class.

Also, add the .form-check-label to the <label> tag, and .form-check-input to the <input> tag.

Inline

With Bootstrap 4, checkboxes and radio buttons are stacked by default (they appear above one another). You can display them inline by adding .form-check-inline to the surrounding <div>. Keep the .form-check-input on the <input> tag.

View Output

Bootstrap 4 vs Bootstrap 3

Bootstrap 3
Uses .radio, .radio-inline, .checkbox, or .checkbox-inline to display checkboxes and radio buttons.
Bootstrap 4
Uses .form-check, .form-check-label, .form-check-input, and .form-check-inline.