• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Custom Forms

← Previous Next →

Custom forms in Bootstrap 4 allow developers to create visually consistent and fully styled form controls beyond the standard browser defaults. These include checkboxes, radio buttons, switches, file inputs, and select menus. Custom forms are particularly useful when you want a polished and modern look while maintaining accessibility and responsiveness across devices.

Custom Checkboxes

Bootstrap 4 provides classes to create stylish checkboxes that are larger and easier to interact with compared to default checkboxes.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Accept Terms and Conditions</label>
</div>

  • custom-control and custom-checkbox wrap the input.

  • custom-control-input styles the actual checkbox.

  • custom-control-label ensures the label is clickable and associated with the input.

Multiple Checkboxes

You can easily include multiple checkboxes in a vertical list or inline.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="option1">
  <label class="custom-control-label" for="option1">Option 1</label>
</div>
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="option2">
  <label class="custom-control-label" for="option2">Option 2</label>
</div>

  • This setup ensures consistency in spacing and alignment.

  • Inline checkboxes can be created with the custom-control-inline class.

Custom Radio Buttons

Radio buttons allow users to select one option from a set. Bootstrap custom radios are more visually appealing than default browser radios.

<div class="custom-control custom-radio">
  <input type="radio" id="radio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="radio1">Option A</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="radio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="radio2">Option B</label>
</div>

  • name="customRadio" ensures only one option can be selected at a time.

  • Like checkboxes, radios can also be displayed inline with custom-control-inline.

Custom Switches

Bootstrap 4 introduces switches as an alternative to checkboxes for a more modern toggle appearance.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Enable Notifications</label>
</div>

  • Switches are useful for on/off settings and preferences.

  • They work the same as checkboxes but offer a more interactive UI.

Custom Select Menus

Custom select menus are styled dropdowns that maintain cross-browser consistency.

<select class="custom-select">
  <option selected>Choose an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

  • custom-select applies a clean, modern style.

  • You can also use custom-select-lg or custom-select-sm for sizing adjustments.

Multiple Selects

<select multiple class="custom-select">
  <option>Option A</option>
  <option>Option B</option>
  <option>Option C</option>
</select>

  • Users can select more than one option by holding Ctrl or Command key.

  • Multiple selects are visually consistent and easy to style.

Custom File Inputs

File inputs can be styled using Bootstrap’s custom-file class, offering a cleaner look and improved usability.

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

  • The label updates automatically when a file is selected.

  • File inputs are often used for uploading profile pictures, documents, or attachments.

Validation in Custom Forms

Custom forms work seamlessly with Bootstrap validation classes. You can use is-valid or is-invalid on inputs, selects, and checkboxes to provide feedback.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input is-invalid" id="termsCheck">
  <label class="custom-control-label" for="termsCheck">Accept Terms</label>
  <div class="invalid-feedback">You must accept the terms before proceeding.</div>
</div>

  • Feedback messages appear under the input, maintaining consistency.

  • This improves usability by guiding the user to correct errors.

Best Practices for Custom Forms

  • Always pair custom controls with labels for accessibility.

  • Use inline controls sparingly to maintain readability.

  • Match custom form sizes to standard input sizes for consistency.

  • Test custom checkboxes, radios, and switches on mobile devices to ensure usability.

  • Apply validation feedback consistently to improve form completion rates.

Summary of the Tutorial

This tutorial covered Bootstrap 4 custom forms and their different components. You learned:

  • How to create custom checkboxes and display multiple options.

  • Implementing custom radio buttons for single-choice selections.

  • Using switches as modern toggle controls.

  • Styling select menus with custom-select, including multiple selects and sizing.

  • Creating visually consistent file inputs with custom-file.

  • Applying validation feedback on custom controls to guide users.

Using custom forms ensures that all form elements are visually consistent, responsive, and accessible, providing a polished user experience across devices.

Practice Questions

  1. Create a form with a single custom checkbox labeled “Accept Terms and Conditions.”

  2. Build a form with two custom radio buttons labeled “Option A” and “Option B,” ensuring only one can be selected.

  3. Create an inline group of three custom checkboxes for selecting multiple interests.

  4. Build a custom switch labeled “Enable Notifications” that toggles on and off.

  5. Create a custom select menu with four options and set one as the default selected option.

  6. Build a multiple select dropdown where users can select more than one option.

  7. Create a custom file input for uploading a profile picture with the label updating on selection.

  8. Build a form that includes a custom checkbox and applies is-invalid feedback if it is not selected.

  9. Create a custom radio button group with validation feedback applied to show an error if no option is chosen.

  10. Combine a custom switch, a select menu, and a file input in a single form, ensuring each element uses Bootstrap’s custom form classes.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top