Bootstrap 4 Custom Forms

Increase browser consistency and customization options with Bootstrap's custom forms.

Bootstrap 4 introduces custom forms. These are completely custom form elements that replace the browser defaults. The idea behind custom forms is that they allow for more customization and cross browser consistency.

Bootstrap 4 uses CSS to hide the original form element (via opacity). It then uses CSS to build a new form control.

Checkboxes & Radio Buttons

Checkboxes

When using checkboxes, wrap them in a <label> element with the Bootstrap 4 .custom-control and .custom-checkbox classes applied.

Use .custom-control-input on the actual <input> element.

Also use two <span> elements: one with the .custom-control-indicator class applied, and the other with .custom-control-description (and place the actual label inside this element).

Radio Buttons

Custom radio buttons are configured the same as checkboxes. The only difference is that you need to use .custom-radio instead of .custom-input on the <label> element.

Stacked Controls

Custom checkboxes and radio buttons are displayed inline by default. To stack them, add a parent class of .custom-controls-stacked.

Select Controls

To make a custom select control, add the Bootstrap 4 .custom-select class to the <select> tag.

File Upload

To make a custom "upload file" control, wrap the <input> tag inside a <label> that has the .custom-file class applied.

Use .custom-control-input on the actual <input> element.

Also use a <span> element with the .custom-file-control class applied.

Alpha Release

Bootstrap 4 is currently in alpha release, therefore, do not use it in production yet. To be safe, refer to the Bootstrap 3 Tutorial until Bootstrap 4 becomes an official release.

Also check out the differences between Bootstrap v3 and v4.