Custom Forms in Bootstrap 4

In Bootstrap 4, elements of forms can be customized, which are meant to change browser defaults. You can change the design of radio button, checkbox, slider, i.e., range, dropdown menu, file upload dialog box trigger, toggle button, etc. In this chapter, you will learn about how to implement them.

Custom Checkbox

To implement this, you have to make use of the class .custom-control and .custom-checkbox within <div>. Also, you have to make use of .custom-control-input class to the <input> with type="checkbox" as attribute and value.

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

Custom Switch

The <div> element is used for creating a custom toggle switch and you have to make use of .custom-control and .custom-switch class around the checkbox. Also, you have to make use of .custom-control-input class to the <input> element. Here is a sample code snippet:

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

Custom Radio Button

For this you have to make use of <div> container element with .custom-control and .custom-radio class around the radio button. Also, you have to implement the .custom-control-input class to the input with type="radio".

Example:
I am ...
<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:

I am ...

Custom Dropdown Select Menu

To implement this within your webpage, you have to make use of the .custom-select class in association with the <select> element. Here is 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 Custom Menu

You can make use of the .custom-select-sm class and .custom-select-lg class for creating small sized as well as large sized menu as per your requirement. Here is a sample code snippet of how to implement it:

Example:
<select name="language" class="custom-select custom-select-lg">
    <option selected>Custom Selection of Menu</option>
    <option value="cpp">C++ 17</option>
    <option value="python">Python 3</option>
    <option value="cs">C# 7</option>
</select>
<br>
<select name="language" class="custom-select custom-select-sm">
    <option selected>Custom Selection of 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 this, you have to make use of the .custom-range class along with type="range" within <input>. 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

For implementing this, you have to make use of the .custom-file class wrapped within <div> and then use the .custom-control-input class within the <input> element. Here is 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:


Scroll Back to Top