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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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).

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.

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.