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 in a more elegant way with examples.

Bootstrap Custom Checkboxes

To create a 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 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.

Live Preview

<form>

<label for="chkenglish" class="custom-control-label">English Language</label>

</div>

<label for="chktelugu" class="custom-control-label">Telugu Language</label>

</div>

</form>

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 like as shown below.

Bootstrap custom checkboxes example result

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.

Live Preview

<form>

<label for="rdbenglish" class="custom-control-label">English Language</label>

</div>

<label for="rdbtelugu" class="custom-control-label">Telugu Language</label>

</div>

</form>

The above example will return the result like as shown below.

Bootstrap custom form radio buttons example result

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.

Live Preview

<form>

<label for="chkenglish" class="custom-control-label">English</label>

</div>

<label for="chktelugu" class="custom-control-label">Telugu</label>

</div>

<hr />

</div>

<label for="rdbfemale" class="custom-control-label">Female</label>

</div>

</form>

The above example will return the result like as shown below.

Bootstrap inline form controls example result

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.

Live Preview

<form>

<label for="chkenglish" class="custom-control-label">English</label>

</div>

<label for="chktelugu" class="custom-control-label">Telugu</label>

</div>

</div>

<label for="rdbfemale" class="custom-control-label">Female</label>

</div>

</form>

The above example will return the result like as shown below.

Bootstrap disabled form controls example result

Bootstrap Switches

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

Live Preview

<form>

<label for="chkenglish" class="custom-control-label">Toggle Switch</label>

</div>

<hr />

<label for="rdbmale" class="custom-control-label">Disabled Switch</label>

</div>

</form>

The above example will return the result like as shown below.

Bootstrap toggle switch example result

Bootstrap Custom Select Menu

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

Live Preview

<form>

<option selected>Custom Select Menu</option>

<option value="1">JavaScript</option>

<option value="2">Bootstrap</option>

<option value="3">jQuery</option>

</select>

</form>

The above example will return the result like as shown below.

Bootstrap custom select menu example result

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.

Live Preview

<option selected>Large Custom Select Menu</option>

<option value="1">JavaScript</option>

<option value="2">Bootstrap</option>

<option value="3">jQuery</option>

</select>

<option selected>Small Custom Select Menu</option>

<option value="1">JavaScript</option>

<option value="2">Bootstrap</option>

<option value="3">jQuery</option>

</select>

The above example will return the result like as shown below.

Bootstrap custom select menu sizing example result

Bootstrap Custom Range Control

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

Live Preview

<form>

<label for="rangeinput">Set the Range</label>

</form>

The above example will return the result like as shown below.

Bootstrap custom range control example result

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 corresponding label element.

Live Preview

<form>

<label class="custom-file-label" for="customFile">Choose file</label>

</div>

</form>

The above example will return the result like as shown below.

Bootstrap custom file upload control example result

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