Customizing utilities

All of the utilities are generated using the utility API and most are declared in the _utilities.scss file, except for the background, borders, colors, position, shadows, and spacing utilities, which have variables and maps defined in the _variables.scss file. We have already learned how to customize text colors and background colors in the previous chapter, and you can learn about the utility API in the next chapter.

Now, we will take a look at some of those utilities that are generated using values from the _variables.scss file.

Borders

The border utilities are generated from variables found in the _variables.scss file on lines 480–500. We will see how we can change the values used to generate the utilities for border width.

The values for border widths are stored in a Sass map, and the line numbers, variable name, and default values are as follows:

bootstrap/scss/_variables.scss

481 $border-widths: (

482   1: 1px,

...