Crafting Custom Forms in Bootstrap

Refer to the following article by Mytour to explore how to customize forms within Bootstrap.

Creating Tailored Forms in Bootstrap

1. Crafting Custom Forms in Bootstrap

Bootstrap 4 allows users to customize default form controls on the browser to create new form layouts as desired. Users can create custom radio buttons and checkbox boxes compatible with browsers, input files, dropdown menus, and more.

2. Creating Custom Checkbox Boxes in Bootstrap

To create custom checkbox boxes in Bootstrap, simply wrap each checkbox input and corresponding label within a div element and apply classes as shown in the example below:

The returned result looks like the following:

3. Creating Custom Radio Buttons in Bootstrap

Similarly, we can also create custom radio buttons using Bootstrap as shown in the example below:

The returned result appears as follows:

Additionally, we can position checkbox and radio buttons horizontally by adding the .custom-control-inline class within the div element as shown in the example below:

The returned result appears as follows:

4. Disabling Custom Checkbox Boxes and Radio Buttons

To disable custom checkboxes and radio buttons, simply add the disabled attribute to the input element.

Example: In the example below, we'll add the disabled attribute to the input element to disable custom checkboxes and radio buttons:

The returned result looks like this:

5. Create a toggle button (on/off button)

A toggle button is similar to a custom checkbox, but it utilizes the .custom-switch class instead of .custom-checkbox to display a toggle switch.

Additionally, toggle buttons in Bootstrap also support the disable attribute.

Example: In the example below, we illustrate how to create a toggle button in Bootstrap:

The returned result looks like this:

6. Creating Custom Menu in Bootstrap

To create a custom menu, simply add the .custom-select class to the select element. However, the appearance of the custom menu remains the same as the original menu, as we cannot modify the option tags due to browser limitations.

Example: In the example below, we'll create a custom menu in Bootstrap:

The returned result looks like this:

Additionally, we can create custom menus with different sizes (large, default, small) to match the input text sizes in Bootstrap as shown in the example below:

The returned result looks like this:

The select tag in Bootstrap also supports attributes such as multiple and size.

For example:

The returned result looks like this:

7. Creating Custom Input Range in Bootstrap

To create a custom input range, simply apply the .custom-range class to the input type='range' tag.

Example: In the example below, we'll create a custom input range in Bootstrap:

The returned result looks like this:

By default, the implicit minimum value for the input range is 0 and the maximum is 100. However, if desired, we can specify new values using the min and max attributes.

Additionally, the input range defaults to integer values. To change these values, we simply need to specify the step value.

Example: In the example below, the step value is specified as 0.5:

The returned result looks like this:

8. Creating Custom Input File in Bootstrap

In Bootstrap 4, we can create custom input files and display them consistently across browsers.

Example: In the example below, we'll create a custom input file in Bootstrap:

The returned result looks like this:

Tips: Bootstrap hides the default input file through opacity and label style. A pseudo-element ::after is used to create and position the button.

Finally, transparent-input is positioned on top of style-label using CSS positioning with appropriate width and height attributes to trigger the file selection dialog.

This lesson from Mytour just showed you how to customize forms in Bootstrap. In the next lesson, Mytour will introduce you to using Input Group in Bootstrap.

Moreover, if you have any doubts or questions needing clarification, feel free to leave your comments below the article.