Bootstrap Custom Forms

Learning how to use Bootstrap to create custom form controls in this lesson.

Creating Custom Form Controls

Bootstrap empowers you to personalize the appearance of default form controls in browsers, resulting in more refined and aesthetically pleasing form layouts. Now, you have the ability to create fully customized and cross-browser compatible elements, including radio buttons, checkboxes, file inputs, select dropdowns, range inputs, and more.

In the upcoming sections, you'll learn how to craft these custom form elements step by step.

Creating Custom Checkboxes

To create custom checkboxes, wrap each checkbox <input> and its corresponding <label> within a <div> element and apply the specified classes, as demonstrated in the following example:

<div class="m-4">
    <form>
        <div class="form-check">
            <input type="checkbox" class="form-check-input" name="customCheck" id="customCheck1">
            <label class="form-check-label" for="customCheck1">Custom checkbox</label>
        </div>
    </form>
</div>

Try this code

Creating Custom Radio Buttons

Similarly, you can fashion custom radio buttons using Bootstrap, as shown here:

<div class="m-4">
    <form>
        <div class="form-check">
            <input type="radio" class="form-check-input" name="customRadio" id="customRadio1">
            <label class="form-check-label" for="customRadio1">Custom radio</label>
        </div>
    </form>
</div>

Try this code

Inline Checkboxes and Radio Buttons

You also have the option to display these custom checkboxes and radio buttons inline by simply adding the class .form-check-inline to the wrapper .form-check element.

The following example showcases the inline display of checkboxes:

<div class="m-4">
    <form>
        <div class="form-check form-check-inline">
            <input type="checkbox" class="form-check-input" name="customCheck" id="Checkbox1">
            <label class="form-check-label" for="customCheck1">Custom checkbox</label>
        </div>
        <div class="form-check form-check-inline ms-4">
            <input type="checkbox" class="form-check-input" name="customCheck" id="Checkbox2" checked>
            <label class="form-check-label" for="customCheck2">Another custom checkbox</label>
        </div>
    </form>
</div>

Try this code

Likewise, radio buttons can be placed inline, as illustrated in this example:

<div class="m-4">
    <form>
        <div class="form-check form-check-inline">
            <input type="radio" class="form-check-input" name="customRadio" id="Radio1">
            <label class="form-check-label" for="customRadio1">Custom radio</label>
        </div>
        <div class="form-check form-check-inline ms-4">
            <input type="radio" class="form-check-input" name="customRadio" id="Radio2" checked>
            <label class="form-check-label" for="customRadio2">Another custom radio</label>
        </div>
    </form>
</div>

Try this code

Disabling Custom Checkboxes and Radios

Custom checkboxes and radio buttons can also be disabled by adding the boolean attribute disabled to the <input> element, as demonstrated in the following example:

<div class="m-4">
    <form>
        <div class="form-check">
            <input type="checkbox" class="form-check-input" id="customCheck" disabled>
            <label class="form-check-label" for="customCheck">Disabled custom checkbox</label>
        </div>
        <div class="form-check mt-2">
            <input type="radio" class="form-check-input" id="customRadio" disabled>
            <label class="form-check-label" for="customRadio">Disabled custom radio</label>
        </div>
    </form>

Try this code

Creating Toggle Switches

Switches, similar to custom checkboxes, use the .form-switch class to render toggle switches. They also support the disabled attribute.

Take a look at the following example to understand how switches work:

<div class="m-4">
    <form>
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="switchDefault">
            <label class="form-check-label" for="switchDefault">Default switch checkbox</label>
        </div>
        <div class="form-check form-switch mt-2">
            <input class="form-check-input" type="checkbox" id="switchChecked" checked>
            <label class="form-check-label" for="switchChecked">Checked switch checkbox</label>
        </div>
        <div class="form-check form-switch mt-2">
            <input class="form-check-input" type="checkbox" id="switchDisabled" disabled>
            <label class="form-check-label" for="switchDisabled">Disabled switch checkbox</label>
        </div>
    </form>

Try this code

Creating Custom Select Menu

To customize select dropdown menus, you can add the class .form-select to the <select> element. However, please note that this custom styling is limited to the initial appearance of the <select> and does not affect the styling of the <option>s due to browser limitations.

<div class="m-4">
    <form>
        <select class="form-select">
            <option selected>Custom select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </form>
</div>

Try this code

Additionally, you can apply the disabled attribute to a custom select element to give it a grayed-out appearance and disable pointer events, as demonstrated in the following example:

<div class="m-4">
    <form>
        <select class="form-select" disabled>
            <option selected>Custom select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </form>
</div>

Try this code

You can customize the size of custom selects to match the height of Bootstrap's text inputs by using the classes .form-select-lg and .form-select-sm on the <select> element. This allows you to create larger or smaller variants of custom selects. Let's see an example to understand how it works:

<div class="m-4">
    <form>
        <select class="form-select form-select-lg">
            <option selected>Large custom select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
        <select class="form-select form-select-sm mt-3">
            <option selected>Small custom select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </form>

Try this code

Bootstrap custom select elements also support the use of the multiple and size attributes, just like regular select elements:

<div class="m-4">
    <form>
        <select class="form-select" size="3" multiple>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
        </select>
    </form>
</div>

Try this code

Creating Custom Range Inputs

To create custom range inputs, simply apply the class .form-range to the <input type="range"> element.

<div class="m-4">
    <form>
        <label for="customRange">Custom range</label>
        <input type="range" class="form-range" id="customRange">
    </form>
</div>

Try this code

You can also disabled the range inputs, giving them a grayed-out appearance and removing pointer events, as demonstrated in the following example:

<div class="m-4">
    <form>
        <label for="customRange">Disabled range</label>
        <input type="range" class="form-range" id="Range1" disabled>
    </form>
</div>

Try this code

Setting the Min and Max Values

By default, range inputs have implicit values for the minimum and maximum range (0 and 100, respectively). However, you can specify new values for the minimum and maximum using the min and max attributes.

Additionally, range inputs snap to integer values by default. If you want to change this behavior, you can specify a step value. In the following example, we've doubled the number of steps by using the step=0.5.

<div class="m-4">
    <form>
        <label for="customRange">Custom range</label>
        <input type="range" class="form-range" min="0" max="10" step="0.5" id="Range2">
    </form>
</div>

Try this code

FAQ

What are Bootstrap Custom Forms?

Bootstrap Custom Forms are a set of form components and styles that Bootstrap offers, allowing developers to create consistent, attractive, and user-friendly forms for their web applications. These forms can be customized according to the project's design requirements while still maintaining the benefits of responsive design that Bootstrap provides.

How do you create a custom-styled select dropdown using Bootstrap Custom Forms?

To create a custom-styled select dropdown using Bootstrap Custom Forms:

Create a <select> element within a <div> or other container.
Apply the custom-select class to the <select> element.
Inside the <select>, add <option> elements for the dropdown options.

<div class="form-group">
  <label for="selectOption">Select an option:</label>
  <select class="custom-select" id="selectOption">
    <option selected>Choose...</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

How can you create custom-styled checkboxes and radio buttons using Bootstrap Custom Forms?

To create custom-styled checkboxes and radio buttons using Bootstrap Custom Forms:

Create an <input type="checkbox"> element.
Apply the custom-control-input class to the checkbox.
Wrap the checkbox in a <div> with the custom-control custom-checkbox classes.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="Checkbox3">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Create an <input type="radio"> element.
Apply the custom-control-input class to the radio button.
Wrap the radio button in a <div> with the custom-control custom-radio classes.

<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" id="Radio3" name="customRadioGroup">
  <label class="custom-control-label" for="customRadio1">Select this custom radio</label>
</div>

How can you create multi-column forms using Bootstrap Custom Forms?

Creating multi-column forms can be useful for organizing form controls into multiple columns. To achieve this using Bootstrap Custom Forms:

Wrap your form controls in a <div> with the form-row class to create a row for your columns.
Within the row, use the col-* classes to specify the desired column widths for each form control.
Apply the form-group class to each form control to maintain consistent styling.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="firstName">First Name</label>
      <input type="text" class="form-control" id="firstName" placeholder="First Name">
    </div>
    <div class="form-group col-md-6">
      <label for="lastName">Last Name</label>
      <input type="text" class="form-control" id="lastName" placeholder="Last Name">
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="email">Email</label>
      <input type="email" class="form-control" id="email" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="phone">Phone</label>
      <input type="tel" class="form-control" id="phone" placeholder="Phone">
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

How do you implement form validation using Bootstrap Custom Forms?

Bootstrap Custom Forms provide built-in form validation styles that help users identify errors easily. To implement form validation using Bootstrap Custom Forms:

Add the was-validated class to the <form> element to enable Bootstrap's validation styles.
Use the .needs-validation class on the form if you want to leverage HTML5 form validation with Bootstrap styling.

<form class="needs-validation" novalidate>
  <div class="form-group">
    <label for="validatedInput">Username</label>
    <input type="text" class="form-control" id="validatedInput" required>
    <div class="invalid-feedback">Please enter a valid username.</div>
  </div>
  <!-- Other form controls here -->
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

How can you add help text to form controls using Bootstrap Custom Forms?

You can add help text to form controls to provide additional information or context for users. To add help text using Bootstrap Custom Forms:

Use the form-text class for small, muted text placed below the form control.

<div class="form-group">
  <label for="username">Username</label>
  <input type="text" class="form-control" id="username">
  <small id="usernameHelp" class="form-text text-muted">Choose a unique username.</small>
</div>

How can you use input masks in Bootstrap Custom Forms?

Input masks help users input data in a specific format. While Bootstrap itself doesn't provide built-in input masks, you can combine Bootstrap Custom Forms with third-party JavaScript libraries like "Inputmask" to achieve this functionality.

Include the Inputmask library in your project.
Use the inputmask class on the form control element and set the data-inputmask attribute to define the mask pattern.

<input type="text" class="form-control inputmask" data-inputmask="'mask': '99/99/9999'">

Remember to load the Inputmask library and initialize it with appropriate settings in your JavaScript code.

Can you create custom styled file input controls with Bootstrap Custom Forms?

Yes, you can create custom styled file input controls using Bootstrap Custom Forms. However, by default, styling file inputs is limited due to browser security constraints. To create a custom styled file input:

Create a visually appealing button or element to act as a trigger.
Hide the actual file input using CSS (e.g., display: none;).
Use JavaScript to trigger a click event on the hidden file input when the custom element is clicked.

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

In this example, clicking the "Choose file" label will trigger the hidden file input's click event.

Please note that advanced styling and behavior for file inputs might require JavaScript manipulation due to browser limitations.

How can you create a custom range slider using Bootstrap Custom Forms?

To create a custom-styled range slider using Bootstrap Custom Forms:

Create an <input type="range"> element.
Apply the custom-range class to the range input.

<label for="customRange">Custom Range</label>
<input type="range" class="custom-range" id="Range3">

You can further customize the appearance of the range slider using CSS, and you can also add JavaScript to handle and display the slider's current value.

How can you create a form with different column ordering for responsive layouts?

Bootstrap's grid system allows you to reorder columns based on the screen size. To create a form with different column ordering for responsive layouts:

Use the order-* classes to specify the order of columns for different screen sizes.
Apply the col-* classes to define column widths.

How can you create a form with tabbed navigation using Bootstrap Custom Forms?

Tabbed navigation within a form can help organize and present a complex set of inputs. To create a form with tabbed navigation using Bootstrap Custom Forms:

Use the .nav-tabs and .nav classes to create the tab navigation structure.
For each tab, create a corresponding <div> with a unique ID to hold the form controls.
Use the .tab-pane class for each tab content <div>.
Add the data-toggle attribute with a value of "tab" to the tab navigation items and link them to the respective tab content.

Example:

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <!-- Form controls for the "Home" tab -->
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <!-- Form controls for the "Profile" tab -->
  </div>
</div>

How can you create a form with a date picker using Bootstrap Custom Forms?

Bootstrap itself doesn't provide a built-in date picker, but you can integrate third-party date picker libraries with Bootstrap Custom Forms. One popular library is "DatePicker" from the Bootstrap-datepicker project.

Include the Bootstrap-datepicker CSS and JavaScript files in your project.
Create an <input> element with the form-control class to serve as the date input.
Use JavaScript to initialize the date picker on the input element.

How can you create a form with a time picker using Bootstrap Custom Forms?

Similar to date pickers, Bootstrap doesn't include a built-in time picker, but you can integrate third-party time picker libraries. "Timepicker" is a popular choice from the Bootstrap-timepicker project.

Include the Bootstrap-timepicker CSS and JavaScript files in your project.
Create an <input> element with the form-control class for the time input.
Use JavaScript to initialize the time picker on the input element.

Conclusion

Bootstrap stands as a dynamic toolkit for custom forms, providing developers and designers with the ability to transform standard form elements into unique, visually appealing components. Bootstrap's capabilities in form personalization further shine through in the realm of form control customization options, offering a multitude of settings for designers to fine-tune the appearance and behavior of form inputs. This includes the ability to craft personalized form layouts, allowing for creative arrangements that enhance user experience.

When it comes to customizing form elements, Bootstrap excels in providing a versatile canvas for developers to craft bespoke controls. This extends to the realm of individualized form controls, where designers can tailor each element to suit the specific needs of their projects. The framework's dedication to custom form styling ensures that forms not only serve functional purposes but also contribute to the overall aesthetic harmony of the web interface.

The customization journey extends to specific form components such as checkboxes and radio buttons, where designers can create stylish and unique controls that elevate the overall visual appeal. The same level of personalization is applied to dropdown menus and select inputs, providing designers with the freedom to shape interfaces that resonate with their design vision.

In the realm of file controls, Bootstrap extends its personalization features to offer stylish and custom file input designs, ensuring a seamless and visually engaging file upload experience. Additionally, Bootstrap caters to the nuanced needs of developers by offering customization options for range inputs, allowing for the definition of min and max values, and handling of disabled states, ensuring precise control over form behavior.

All Tutorials