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.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Boots</label>
</div>

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.

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Boots</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Shoes</label>
</div>

Inline Controls

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

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Boots</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Shoes</label>
</div>

Select Controls

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

<select class="custom-select">
<option selected>Choose One...</option>
<option value="1">Boots</option>
<option value="2">Shoes</option>
<option value="3">Feet</option>
</select>

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.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>