To create a custom "toggle switch", wrap a container element, like div, with a class of .custom-control and .custom-switch around a checkbox. Then add the .custom-control-input class to the checkbox:
To create a custom radio button, wrap a container element, like div, with a class of .custom-control and .custom-radio around the radio button. Then add the .custom-control-input to the radio button.
Tip: If you use labels for accompanying text, add the .custom-control-label class to it. Note that the value of the for attribute should match the id of the radio:
If you want the custom form controls to sit side by side (inline), add the .custom-control-inline to the wrapper/container:
To create a custom select menu, add the .custom-select class to the select element:
To create a custom range menu, add the .custom-range class to the input element with type="range":
To create a custom file upload, wrap a container element with a class of .custom-file around the input with type="file". Then add the .custom-file-input to the file input: