Bootstrap4 可以自定義一些表單的樣式來替換浏覽器預設的樣式。
如果要自定義一個複選框，可以設定 <div> 為父元素，類為 .custom-control 和 .custom-checkbox，複選框作為子元素放在該 <div> 裡頭，然後複選框設定為 type="checkbox"，類為 .custom-control-input。
複選框的文本使用 label 标簽，标簽使用 .custom-control-label 類，label 的 for 屬性值需要比對複選框的 id。
<form>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">自定義複選框</label>
</div>
</form>
如果要自定義一個單選框，可以設定 <div> 為父元素，類為 .custom-control 和 .custom-radio，單選框作為子元素放在該 <div> 裡頭，然後單選框設定為 type="radio"，類為 .custom-control-input。
單選框的文本使用 label 标簽，标簽使用 .custom-control-label 類，label 的 for 屬性值需要比對單選框的 id。
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customRadio" name="example1" value="customEx">
<label class="custom-control-label" for="customRadio">自定義單選框</label>
我們可以在外部元素上使用 .custom-control-inline 類來包裹自定義表單控件，這樣自定義表單控件就能顯示在同一行：
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="customRadio" name="example" value="customEx">
<label class="custom-control-label" for="customRadio">自定義單選框 1</label>
<input type="radio" class="custom-control-input" id="customRadio2" name="example" value="customEx">
<label class="custom-control-label" for="customRadio2">自定義單選框 2</label>
建立自定義選擇菜單可以在 <select> 元素上添加 .custom-select 類:
<select name="cars" class="custom-select-sm">
<option selected>自定義選擇菜單</option>
<option value="Google">Google</option>
<option value="Runoob">Runoob</option>
<option value="Taobao">Taobao</option>
</select>
如果我們要設定自定義選擇菜單大小，可以使用 .custom-select-sm、.custom-select-lg 來設定它們的大小:
<!-- 小 -->
<option selected>比較小的自定義選擇菜單</option>
<!-- 大 -->
<select name="cars" class="custom-select-lg">
<option selected>比較大的自定義選擇菜單</option>
我們可以在 input 為 type="range" 的輸入框中添加 .custom-range 類來設定自定義滑塊控件:
<label for="customRange">自定義滑塊控件</label>
<input type="range" class="custom-range" id="customRange" name="points1">
我們可以在父元素添加 .custom-file 類，然後在 input 設定為 type="file" 并添加 .custom-file-input:
上傳控件的文本使用 label 标簽，标簽使用 .custom-file-label 類，label 的 for 屬性值需要比對上傳控件 id。
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">選擇檔案</label>