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

Creating Custom Form Controls

Bootstrap 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:

Example

<div class="form-check">
    <input type="checkbox" class="form-check-input" name="customCheck" id="customCheck1">
    <label class="form-check-label" for="customCheck1">Custom checkbox</label>
</div>
<div class="form-check">
    <input type="checkbox" class="form-check-input" name="customCheck" id="customCheck2" checked>
    <label class="form-check-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:

Example

<div class="form-check">
    <input type="radio" class="form-check-input" name="customRadio" id="customRadio1">
    <label class="form-check-label" for="customRadio1">Custom radio</label>
</div>
<div class="form-check">
    <input type="radio" class="form-check-input" name="customRadio" id="customRadio2" checked>
    <label class="form-check-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 the class .form-check-inline on the wrapper .form-check element.

The following example will display the checkboxes inline (i.e., in the same line).

Example

<div class="form-check form-check-inline">
    <input type="checkbox" class="form-check-input" name="customCheck" id="customCheck1">
    <label class="form-check-label" for="customCheck1">Custom checkbox</label>
</div>
<div class="form-check form-check-inline">
    <input type="checkbox" class="form-check-input" name="customCheck" id="customCheck2" checked>
    <label class="form-check-label" for="customCheck2">Another custom checkbox</label>
</div>

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

Similarly, you can place the radio buttons inline, as shown in the following example:

Example

<div class="form-check form-check-inline">
    <input type="radio" class="form-check-input" name="customRadio" id="customRadio1">
    <label class="form-check-label" for="customRadio1">Custom radio</label>
</div>
<div class="form-check form-check-inline">
    <input type="radio" class="form-check-input" name="customRadio" id="customRadio2" checked>
    <label class="form-check-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:

Example

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

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