Bootstrap Custom Forms

In the previous chapters, we learned about bootstrap forms and bootstrap form inputs to design and change the default style of form input controls with different form control styles. Now, we will learn how to use bootstrap custom form elements to customize the default controls more elegantly with examples.

Bootstrap Custom Checkboxes

To create custom checkboxes, first, you need to create a container element (<div>) with .custom-control and .custom-checkbox classes to wrap the checkbox input element and corresponding label element. After that add .custom-control-input class to <input type="checkbox"> element and add .custom-control-label class to the corresponding label element.

In case if you use labels to add text for checkboxes, then the for attribute value of label control must match the id of the custom checkbox.

If you observe the above example, the for attribute value of label control is same as the id of the custom checkbox. The above example will return the result as shown below.

If you observe the above result, the default style of checkboxes changed with custom bootstrap classes.

Bootstrap Custom Radio Buttons

In bootstrap, creating the custom radio buttons is same as custom checkboxes, but the only difference is we need to add .custom-radio class to the container element (<div>) instead of .custom-checkbox class.

The above example will return the result as shown below.

Bootstrap Inline Custom Form Controls

In case if you want to arrange the custom checkboxes and radios horizontally in same row, then you need to add .custom-control-inline class to the wrapper element (<div>) along with other classes (custom-control, custom-checkbox) like as shown below.

The above example will return the result as shown below.

Bootstrap Disable Custom Form Controls

By adding disabled attribute to the custom checkboxes and radio buttons, we can make the controls disabled based on our requirements.

The above example will return the result as shown below.

Bootstrap Switches

In bootstrap, you can create the custom toggle switches same as custom checkboxes, but the only difference is you need to use .custom-switch class instead of .custom-checkbox in wrapper element (<div>).

The above example will return the result as shown below.

Bootstrap Custom Select Menu

In bootstrap, we can create the custom select menu by adding .custom-select class to the <select> element.

The above example will return the result as shown below.

Bootstrap Custom Select Menu Sizing

In bootstrap, we can change the size of custom <select> menu to large or small by using .custom-select-lg, .custom-select-sm classes.

The above example will return the result as shown below.

Bootstrap Custom Range Control

In bootstrap, you can create the custom range control by adding .custom-range class to the <input type="range"> element.

The above example will return the result as shown below.

Bootstrap Custom File Upload

To create a custom file upload control, first, you need to create a container element (<div>) with .custom-file class to wrap the file upload element and corresponding label element. After that add .custom-file-input class to <input type="file"> element and add .custom-file-label class to the corresponding label element.

The above example will return the result as shown below.

This is how we can create the custom input controls using bootstrap custom styles based on our requirements.