Bootstrap4 Custom Forms

Custom Checkbox

To customize a checkbox, set the <div> as the parent element with classes .custom-control and .custom-checkbox, place the checkbox as a child element inside this <div>, and set the checkbox to type="checkbox" with the class .custom-control-input.

The text for the checkbox uses the label tag, which uses the .custom-control-label class. The for attribute of the label should match the id of the checkbox.

Bootstrap4 Example

<form>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
    <label class="custom-control-label" for="customCheck">Custom Checkbox</label>
  </div>
</form>

Custom Radio Button

To customize a radio button, set the <div> as the parent element with classes .custom-control and .custom-radio, place the radio button as a child element inside this <div>, and set the radio button to type="radio" with the class .custom-control-input.

The text for the radio button uses the label tag, which uses the .custom-control-label class. The for attribute of the label should match the id of the radio button.

Bootstrap4 Example

<form>
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customRadio" name="example1" value="customEx">
    <label class="custom-control-label" for="customRadio">Custom Radio Button</label>
  </div> 
</form>

Custom Controls Displayed in a Row

You can wrap custom form controls with the .custom-control-inline class on an outer element to display them in a row:

Bootstrap4 Example

<form>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio">Custom Radio Button 1</label>
  </div>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio2" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio2">Custom Radio Button 2</label>
  </div> 
</form>

Custom Select Menu

To create a custom select menu, add the .custom-select class to the <select> element:

Bootstrap4 Example

<form>
  <select name="cars" class="custom-select-sm">
    &lt;option selected>Custom Select Menu</option>
    <option value="Google">Google</option>
    <option value="tutorialpro">tutorialpro</option>
    <option value="Taobao">Taobao</option>
  </select>
</form>

If we want to set custom selection menu sizes, we can use .custom-select-sm and .custom-select-lg to adjust their sizes:

Bootstrap4 Example

<form>
  <!-- Small -->
  <select name="cars" class="custom-select-sm">
    &lt;option selected>Small custom selection menu</option>
    <option value="Google">Google</option>
    <option value="tutorialpro">tutorialpro</option>
    <option value="Taobao">Taobao</option>
  </select>

  <!-- Large -->
  <select name="cars" class="custom-select-lg">
    &lt;option selected>Large custom selection menu</option>
    <option value="Google">Google</option>
    <option value="tutorialpro">tutorialpro</option>
    <option value="Taobao">Taobao</option>
  </select>
</form>

Custom Slider Control

We can add the .custom-range class to an input with type="range" to create a custom slider control:

Bootstrap4 Example

<form>
  <label for="customRange">Custom Slider Control</label>
  <input type="range" class="custom-range" id="customRange" name="points1">
</form>

Custom File Upload Control

We can add the .custom-file class to the parent element, and then set the input to type="file" with the .custom-file-input class:

The text for the upload control uses the label tag, which has the .custom-file-label class, and the for attribute of the label should match the id of the upload control.

Bootstrap4 Example

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