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 <div> element with the Bootstrap 4 .custom-control and .custom-checkbox classes applied. Also use .custom-control-input on the actual <input> element, as well as .custom-control-label on the <label> 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.
Inline Controls
Custom checkboxes and radio buttons are stacked by default. To display them inline, add a parent class of .custom-control-inline.
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 <div> that has the .custom-file class applied. Use .custom-control-input on the actual <input> element. Also use a <label> element with the .custom-file-label class applied.