The switch markup is similar to custom checkbox—the only difference is—it uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute.

Let’s try out the following example to understand how it basically works:

Example

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="switchDefault">
    <label class="form-check-label" for="switchDefault">Default switch checkbox</label>
</div>
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="switchChecked" checked>
    <label class="form-check-label" for="switchChecked">Checked switch checkbox</label>
</div>
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="switchDisabled" disabled>
    <label class="form-check-label" for="switchDisabled">Disabled switch checkbox</label>
</div>

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

---

You can also customize the select dropdown menus by simply adding the class .form-select on the <select> element. However, this custom styling is limited only to the initial appearance of the <select> and cannot modify the <option>s due to browser limitations.

Example

<select class="form-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 add the disabled attribute on a custom select to give it a grayed out appearance and remove pointer events, as shown in the following example:

Example

<select class="form-select" disabled>
    <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 large and small variant of the custom selects to match the height of similarly sized Bootstrap’s text inputs using the classes .form-select-lg and .form-select-sm on the <select> element, respectively. Let’s take a look at the following example:

Example

<select class="form-select form-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="form-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="form-select form-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:

Example

<select class="form-select" size="3" multiple>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>

Creating Custom Range Inputs

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

Example

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

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

You can also add disabled attribute on the range inputs to give it a grayed out appearance and remove pointer events, as shown in the following example:

Example

<label for="customRange">Disabled range</label>
<input type="range" class="form-range" id="customRange" disabled>

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

Setting the Min and Max Values

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".

Example

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