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.