Customizing forms

Form elements can be customized using the form variables found in the _variables.scss file on lines 796–1034 and lines 1313–1318. With these variables, you can change things such as form text, form labels, regular inputs, checkboxes and radio buttons, switches, input groups, select elements, range inputs, file inputs, floating labels, and form validation.

As an example, we will customize a range input.

Range

First, let’s see what a default range input looks like:

Figure 5.7 – Default range input

We will now change the track height, thumb width, and thumb border radius for the range input. The line number, variable name, and default value for these three properties of the range input are as follows:

bootstrap/scss/_variables.scss

972 $form-range-track-height: .5rem;
978 $form-range-thumb-width: 1rem;
982 $form-range-thumb-border-radius: 1rem;

We will make the range input twice as big by doubling...