Using Bootstrap 5 CSS custom properties

Bootstrap 5 includes many CSS custom properties in its compiled CSS file (bootstrap/dist/css/bootstrap.css). This gives us global access to values for colors, typography, and borders, as well as local access to various values for most components and some utilities when the Bootstrap 5 CSS is loaded. With these CSS custom properties, we can do customization without having to recompile the Sass code using a CSS preprocessor.

CSS custom properties or CSS variables?

CSS custom properties are also often referred to as CSS variables. This is also the way the Bootstrap team refers to them in the official documentation, but in this chapter, I will refer to them as CSS custom properties, to better distinguish them from Sass variables.

Groups of CSS custom properties

In Bootstrap 5, there are three major groups of CSS custom properties:

• Root CSS custom properties
• Component CSS custom properties
• Utility CSS custom properties
...