Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Custom Forms

Bootstrap 4 allows us to customize the browser’s default form and controls like checkbox, radio buttons, file inputs and more.


Custom Checkbox

The .custom-control and .custom-checkbox classes are used in <div> element to wrap the container element.

The .custom-control-input class is used with <input type="checkbox"> to create custom checkbox.

If you use <label>s for accompanying text, add the .custom-control-label class to it.

Run code

Custom checkboxes can also utilize the :indeterminate pseudo class when manually set via JavaScript or jQuery (there is no available HTML attribute for specifying it).

Run code

Custom Switch

A switch has the markup of a custom checkbox but uses the .custom-switch class to render a toggle switch.

Run code

Custom Radio Buttons

The .custom-control and .custom-radio classes are used in <div> element to wrap the container element.

The .custom-control-input class is used with <input type="radio"> to create custom radio button.

If you use <label>s for accompanying text, add the .custom-control-label class to it.

Run code

Inline Checkboxes and Radios

If you want the custom form controls to sit side by side (inline), add the .custom-control-inline to the container element.

Run code

Custom Select Menu

To create a custom select menu, add the .custom-select class to the <select> element.

Run code

Custom Select Menu Sizing

Change the size of the custom select menu with .custom-select-lg or .custom-select-sm.

Run code

Custom Range

To create a custom range menu, add the .custom-range class to an <input type="range">.

Run code

Custom File Upload

The .custom-file class is used in <div> element to wrap the container element.

The .custom-control-input class is used with <input type="file"> to create custom file upload.

If you use <label>s for accompanying text, add the .custom-control-label class to it.

You can also include some jQuery code if you want the name of the file to appear when you select a specific file.

Run code