BOOTSTRAP BASIC
BOOTSTRAP ADVANCED
BOOTSTRAP EXAMPLES
BOOTSTRAP ARCHIVE
SPONSORED LINKS
Advertisements

Bootstrap Custom Forms

In this tutorial you will learn how to create custom form controls with Bootstrap.

Creating Custom Form Controls

Bootstrap 4 enables you to customize the browser's default form controls to create even more elegant form layouts. Now you can create completely customized and cross-browser compatible radio buttons and checkboxes, file inputs, select dropdowns, range inputs, and more.

In the following sections, you'll see how to create those custom form elements one by one.

Creating Custom Checkboxes

To create custom checkboxes wrap each checkbox <input> and their corresponding <label> in a <div> element, and apply the classes as shown in the following example:

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" name="customCheck" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">Custom checkbox</label>
</div>
<div class="custom-control custom-checkbox mt-2">
    <input type="checkbox" class="custom-control-input" name="customCheck" id="customCheck2" checked>
    <label class="custom-control-label" for="customCheck2">Another custom checkbox</label>
</div>

— The output of the above example will look something like this:


Creating Custom Radio Buttons

Similarly, you can create custom radio buttons using the Bootstrap like this:

<div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" name="customRadio" id="customRadio1">
    <label class="custom-control-label" for="customRadio1">Custom radio</label>
</div>
<div class="custom-control custom-radio mt-2">
    <input type="radio" class="custom-control-input" name="customRadio" id="customRadio2" checked>
    <label class="custom-control-label" for="customRadio2">Another custom radio</label>
</div>

— The output of the above example will look something like this:

You can also place these custom checkboxes and radio buttons inline by simply adding a class .custom-control-inline on the wrapper <div> element, like this:

<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" name="customRadio" id="customRadio1">
    <label class="custom-control-label" for="customRadio1">Custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" name="customRadio" id="customRadio2" checked>
    <label class="custom-control-label" for="customRadio2">Another custom radio</label>
</div>

— The output of the above example will look something like this:


Disabling Custom Checkboxes and Radios

Custom checkboxes and radio buttons can also be disabled. Just add the boolean attribute disabled to the <input> element, as shown in the following example:

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck" disabled>
    <label class="custom-control-label" for="customCheck">Disabled custom checkbox</label>
</div>
<div class="custom-control custom-radio mt-2">
    <input type="radio" class="custom-control-input" id="customRadio" disabled>
    <label class="custom-control-label" for="customRadio">Disabled custom radio</label>
</div>

— The output of the above example will look something like this:


Creating Toggle Switches

The switch markup is similar to custom checkbox, the only difference is it uses the .custom-switch class in place of .custom-checkbox to render a toggle switch.

Switches also support the disabled attribute. Let's check out an example:

<div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitch1">
    <label class="custom-control-label" for="customSwitch1">Toggle switch</label>
</div>
<div class="custom-control custom-switch mt-2">
    <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
    <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

— The output of the above example will look something like this:


Creating Custom Select Menu

Custom select menus can be created simply by adding the class .custom-select on the <select> element. However, custom styling of the select menus are limited only to the initial appearance and cannot modify the <option>s due to browser limitations. Here's an example:

<select class="custom-select">
    <option selected>Custom select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

— The output of the above example will look something like this:

You can also create small and large custom selects to match similarly sized Bootstrap text inputs.

<select class="custom-select custom-select-lg">
    <option selected>Large custom select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<select class="custom-select mt-3">
    <option selected>Default custom select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<select class="custom-select custom-select-sm mt-3">
    <option selected>Small custom select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

— The output of the above example will look something like this:

Bootstrap custom select also supports multiple and size attributes like normal select:

<select class="custom-select" size="3" multiple>
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

Creating Custom Range Inputs

To create custom range inputs just apply the class .custom-range to the <input type="range">.

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

— The output of the above example will look something like this:

By default range inputs have implicit values for min and max—0 and 100, respectively. But, you may specify new values for those using the min and max attributes.

Also, range inputs "snap" to integer values by default. To change this, you can specify a step value. In the following example, we've doubled the number of steps by using the step="0.5".

<label for="customRange">Custom range</label>
<input type="range" class="custom-range" min="0" max="10" step="0.5" id="customRange">

Creating Custom File Inputs

With Bootstrap 4 you can also create custom file inputs which are elegant and render consistently across browsers. Let's try out the following example to see how it works:

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

— The output of the above example will look something like this:

Tip: Bootstrap hides the default file <input> via opacity and style the <label> to look like an input instead. The button is generated and positioned with ::after pseudo element. Finally, the transparent <input> is placed above the styled <label> using the CSS positioning with proper width and height to trigger the file picker dialog box.

Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.