Bootstrap 4 Custom Forms
Bootstrap 4 comes with customized form elements, that are meant to replace browser defaults:
Custom file upload
Toggle this custom switch
Custom Checkbox
To create a custom checkbox, wrap a container element, like
.custom-control and .custom-checkbox around the checkbox. Then add the .custom-control-input to the input with type="checkbox".
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 checkbox:
Example
Check this custom checkbox
Try it Yourself »
Custom Switch
To create a custom "toggle switch", wrap a container element, like
.custom-control and .custom-switch around a checkbox. Then add the .custom-control-input class to the checkbox:Toggle me
Example
Toggle me
Try it Yourself »
Custom Radio buttons
To create a custom radio button, wrap a container element, like
.custom-control and .custom-radio around the radio button. Then add the .custom-control-input to the input with type="radio".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:
Example
Custom radio
Try it Yourself »
Inline Custom Form Controls
If you want the custom form controls to sit side by side
[inline], add the .custom-control-inline to the wrapper/container:
Custom radio
Custom radio
Example
Custom radio 1
Custom radio 2
Try it Yourself »
Custom Select Menu
To create a custom select menu, add the .custom-select class to the element:
Example
Custom Select Menu
Volvo
Fiat
Audi
Try it Yourself »
Custom Select Menu Size
Use the .custom-select-sm class to create a small select menu and the .custom-select-lg class for a large one:
Example
Small Custom Select Menu
Volvo
Fiat
Audi
Large Custom Select Menu
Volvo
Fiat
Audi
Try it Yourself »
Custom Range
To create a custom range menu, add the .custom-range class to an input with type="":
Custom range
Default range
Example
Custom range
Try it Yourself »
Custom File Upload
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 it.
Tip: If you use labels for accompanying text, add the .custom-file-label class to it. Note that the value of the for attribute should match the id of the
checkbox:
Choose file
Default file:
Note that you also have to include some jQuery code if you want the name of the file to appear when you select a specific file:
Example
Choose file
// Add the following code if you want the name of the file appear on select
$[".custom-file-input"].on["change", function[] {
var fileName = $[this].val[].split["\\"].pop[];
$[this].siblings[".custom-file-label"].addClass["selected"].html[fileName];
}];
Try it Yourself »