Bootstrap 4 - Custom Forms

In Bootstrap 4, you can customize the form element design to replace the browser default. You can change the design of the radio button, checkbox, slider, i.e., range, dropdown menu, file upload, toggle button, etc. In this tutorial, you will learn how to implement them.

Custom Checkbox

To implement custom checkboxes, .custom-control  and .custom-checkbox classes are used within the <div> tag. And .custom-control-input class is used in <input> with type="checkbox" as the attribute and value.

Example:

<div class="custom-control custom-checkbox">
    <input id="terms" class="custom-control-input" name="terms" type="checkbox">
    <label class="custom-control-label" for="terms">I agree to the Terms of Service.</label>
</div>

Output:

Custom Switch

The <div> element is used to create custom toggle switches, .custom-control  and .custom-switch  classes are used around checkboxes. And .custom-control-input  class is used for the <input> element. Here is a sample code snippet:

Example:

<div class="custom-control custom-switch">
    <input id="subscribe" class="custom-control-input" type="checkbox">
    <label class="custom-control-label" for="subscribe">Yes, I want to subscribe.</label>
</div>

Output:

Custom Radio Button

Custom radio buttons are created using a <div> container element with the .custom-control and .custom-radio classes around the radio button. And the .custom-control-input class has to be applied to the input with the type="radio" attribute.

Example:

<p>I am ...</p>
<div class="offset-1">
    <div class="custom-control custom-radio">
        <input type="radio" class="custom-control-input" name="UserType" id="Student" value="Student">
        <label class="custom-control-label" for="Student">A Student</label>
    </div>
        
    <div class="custom-control custom-radio">
        <input type="radio" class="custom-control-input" name="UserType" id="Institute" value="Institute">
        <label class="custom-control-label" for="Institute">An Institute/Training Center</label>
    </div>
        
    <div class="custom-control custom-radio">
        <input type="radio" class="custom-control-input" name="UserType" id="Faculty" value="Faculty">
        <label class="custom-control-label" for="Faculty">A Faculty</label>
    </div>
</div>

Output:

Custom Dropdown Select Menu

To create bootstrap 4 custom-design dropdown on select inputs, .custom-select class is used in the <select> element. Here's a sample code snippet of how to use it:

Example:

<select name="course" class="custom-select">
    <option selected>Select Course</option>
    <option value="BCA">BCA</option>
    <option value="MCA">MCA</option>
    <option value="BE">BE</option>
    <option value="CS">CS</option>
</select>

Output:

Customize the Size of the Custom Menu

You can use the .custom-select-sm class and the .custom-select-lg class to create dropdowns of smaller and larger sizes as per the design requirement. Here's a sample code snippet of how to implement it:

Example:

<select name="language" class="custom-select custom-select-lg mb-3">
    <option selected>Custom Large Selection Menu</option>
    <option value="cpp">C++ 17</option>
    <option value="python">Python 3</option>
    <option value="cs">C# 7</option>
</select>

<select name="language" class="custom-select custom-select-sm">
    <option selected>Custom Small Selection Menu</option>
    <option value="cpp">C++ 17</option>
    <option value="python">Python 3</option>
    <option value="cs">C# 7</option>
</select>

Output:

Custom Range

To implement Custom Range, .custom-range class is used within <input> tag along with type="range" attribute. Here is a code snippet:

Example:

<label for="customRange">Example of Custom range</label>
<input type="range" class="custom-range" id="customRange" name="range1">

Output:

Custom File Upload

To implement custom file uploads, the .custom-file class is wrapped in a <div> and then the .custom-file-input class is used within the <input> tag along with type="file" attribute. Here's a sample code snippet of how to use it using Bootstrap 4:

Example:

<div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose a file</label>
</div>

Output: