Bootstrap custom form controls


In Bootstrap, custom form controls allow you to style native form elements like checkboxes, radio buttons, file inputs, and more with a consistent design, while preserving accessibility and functionality. These custom controls offer enhanced styling options that go beyond the basic form controls.

1. Custom Checkboxes

Bootstrap provides custom-styled checkboxes that offer a more modern look than the default browser styling. You can create custom checkboxes using the .form-check and .form-check-input classes.

Example of custom checkbox:

<div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="customCheck1"> <label class="form-check-label" for="customCheck1">Custom Checkbox</label> </div>
  • .form-check: Wraps the checkbox input and label.
  • .form-check-input: Applies custom Bootstrap styling to the checkbox.
  • .form-check-label: Styles the label to align with the custom checkbox.

2. Custom Radio Buttons

Similar to custom checkboxes, Bootstrap offers custom radio buttons that can be styled using .form-check and .form-check-input classes.

Example of custom radio buttons:

<div class="form-check"> <input class="form-check-input" type="radio" name="customRadio" id="customRadio1" checked> <label class="form-check-label" for="customRadio1">Custom Radio 1</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="customRadio" id="customRadio2"> <label class="form-check-label" for="customRadio2">Custom Radio 2</label> </div>
  • .form-check-input: Applies the custom Bootstrap radio button styling.
  • Radio buttons can be grouped by giving them the same name attribute.

3. Custom Select Dropdown

Bootstrap's custom-styled select dropdown can be created using the .form-select class. This class ensures the dropdown looks consistent with other form elements.

Example of custom select dropdown:

<select class="form-select"> <option selected>Select an option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>
  • .form-select: This class applies custom Bootstrap styling to the select element.
  • You can customize the appearance of the select dropdown while maintaining native functionality.

4. Custom File Input

To style file upload inputs, Bootstrap provides the .form-control class. You can also add the .custom-file and .custom-file-input classes for more control over the styling.

Example of custom file input:

<div class="mb-3"> <label for="customFile" class="form-label">Choose file</label> <input type="file" class="form-control" id="customFile"> </div>
  • .form-control: Applies consistent styling to the file input.
  • When a file is chosen, the file name will appear as a label next to the button.

5. Custom Switches (Toggle)

Bootstrap allows you to create custom switches, which are styled checkboxes that function as toggle buttons.

Example of custom switch:

<div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="customSwitch1"> <label class="form-check-label" for="customSwitch1">Toggle Switch</label> </div>
  • .form-switch: This class transforms a standard checkbox into a toggle switch.
  • .form-check-input: Styles the checkbox to look like a switch.

6. Custom Range Input

For input elements of type="range", Bootstrap provides a custom range slider. You can use .form-range to style these inputs.

Example of custom range input:

<label for="customRange" class="form-label">Range</label> <input type="range" class="form-range" id="customRange">
  • .form-range: This class adds custom Bootstrap styling to the range slider.

7. Custom Checkboxes and Radios Inline

Bootstrap allows you to display checkboxes and radio buttons inline using .form-check-inline.

Example of inline custom checkboxes:

<div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> <label class="form-check-label" for="inlineCheckbox1">1</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> <label class="form-check-label" for="inlineCheckbox2">2</label> </div>
  • .form-check-inline: Places the checkboxes or radios next to each other, rather than stacking them vertically.

8. Custom Form Control Sizing

Bootstrap also allows for sizing form controls by adding .form-control-lg for large controls and .form-control-sm for small ones.

Example of custom-sized form controls:

<input class="form-control form-control-lg" type="text" placeholder="Large input"> <input class="form-control form-control-sm" type="text" placeholder="Small input">
  • .form-control-lg: Enlarges the form control.
  • .form-control-sm: Makes the form control smaller.

9. Custom Validation States

Custom form controls can be validated using the same .is-valid and .is-invalid classes that Bootstrap provides for other form elements.

Example of custom checkbox validation:

<div class="form-check"> <input class="form-check-input is-invalid" type="checkbox" value="" id="customCheckInvalid"> <label class="form-check-label" for="customCheckInvalid">Invalid Custom Checkbox</label> <div class="invalid-feedback">You must check this box!</div> </div>
  • .is-valid and .is-invalid: Apply validation styles to custom checkboxes, radio buttons, and other controls.

Summary of Custom Form Controls in Bootstrap:

  • Custom Checkboxes & Radio Buttons: Styled with .form-check-input and .form-check-label for a modern look.
  • Custom Select Dropdown: Use .form-select for a consistent and styled dropdown.
  • Custom File Input: Style file input elements with .form-control for better user experience.
  • Custom Switch: Toggle switches are styled checkboxes using .form-switch.
  • Custom Range: Use .form-range to style range sliders.
  • Inline Custom Controls: Use .form-check-inline to display checkboxes and radio buttons inline.
  • Custom Sizing: Use .form-control-lg or .form-control-sm for different-sized input fields.
  • Validation: Apply .is-valid or .is-invalid to custom controls for validation styling.