Bootstrap 4 Custom Controls


Basic Custom Controls

Html inputs can be customized with custom controls on bootstrap. This means it changes the browser defaults. To use it, you need to add the .custom-control class.


Custom CheckBox

Follow these steps to create a custom checkbox:

  1. All you have to do is create a <div> and add .custom-control, .custom-checkbox classes to its class, respectively.
  2. Then create an <input> and add the type = "checkbox" attribute to it. And add the .custom-control-input class to its class.
  3. If you want to add text to the checkbox, you need to add a .custom-control-label class with its <label> created class.

Note: The value of the id of the checkbox input should be equal to the value of the for attribute of the <label>. Otherwise the custom control will not work.

Example code

<form>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" name="" id="CustomControlcheck" name="example">
<label class="custom-control-label" for="CustomControlcheck">Custom checkbox</label>
</div>
</form>

Custom Radio Button

Follow these steps to create a custom radio button:

  1. All you have to do is create a <div> and add .custom-control, .custom-radio classes to its class, respectively.
  2. Then create an <input> and add the type = "radio" attribute to it. And add the .custom-control-input class to its class.
  3. If you want to add text to a radio, you need to add a .custom-control-label class with its <label> created class.

Note: The value of the id of the radio input should be equal to the value of the for attribute of the <label>. Otherwise the custom control will not work.

Example code

<form>
<div class="custom-control custom-radio mb-3">
<input type="radio" class="custom-control-input" name="" id="CustomControlradio" name="example">
<label class="custom-control-label" for="CustomControlradio">Custom checkbox</label>
</div>
</form>

Custom Toggle

Follow these steps to create a custom toggle switch:

  1. All you have to do is create a <div> and add .custom-control, .custom-switch classes to its class, respectively.
  2. Then create an <input> and add the type = "checkbox" attribute to it. And add the .custom-control-input class to its class.
  3. If you want to add text to toggle switch, you need to add a .custom-control-label class with its <label> created class.

Note: The value of the id of the checkbox input should be equal to the value of the for attribute of the <label>. Otherwise the custom control will not work.

Example code

<form>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="toggleswitch" name="">
<label for="toggleswitch" class="custom-control-label">Toggle me</label>
</div>
</form>

Custom Select Menu

If you want to make a custom select menu in bootstrap, only the .custom-select class should be inserted in <select>.If the select menu is to be shown in small size then .custom-select-sm class and if it is to be shown in large size then add .custom-select-lg class.

Example code

<form>
<select for="brands" class="custom-select custom-select-sm mb-4">
<option selected>Select your favorite cricketer</option>
<option>Virat Kohli</option>
<option>MS Dhoni</option>
<option>Rohit Sharma</option>
</select>
<select for="number" class="custom-select mb-4">
<option selected>Select any number</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select for="character" class="custom-select custom-select-lg mb-4">
<option selected>Select any character</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</form>

Custom Range

To create a custom range, you need to insert the .custom-range class and add input type = "range".

Example code

<form>
<input type="range" class="custom-range" name="">
</form>
s

Custom File

Follow these steps to create a custom file input:

  1. All you have to do is create a <div> and add .custom-file class to its class.
  2. Then create an <input> and add the type = "file" attribute to it. And add the .custom-file-input class to its class.
  3. If you want to add text to the file input, you need to add a .custom-file-label class with its <label> created class.

Note: The value of the id of the file input should be equal to the value of the for the attribute of the <label>. Otherwise, the custom control will not work.

Example code

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

Inline Custom Controls

All custom controls you want to inline need to add .custom-control-inline to the class of <div> containers.

Example code

<form>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="Inlinecheckbox" name="">
<label for="Inlinecheckbox" class="custom-control-label">Inline checkbox</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" class="custom-control-input" id="Inlineradio" name="">
<label for="Inlineradio" class="custom-control-label">Inline radio</label>
</div>
</form>