Creating a custom component using Bootstrap 5 variables, mixins, and functions

In the previous section, we saw how we could extend existing Bootstrap 5 classes using the @extend rule of Sass to create a custom component. In this section, we will see how we can create a custom component with Sass using the approach recommended by the team behind Bootstrap. This approach first of all entails reusing as many Bootstrap variables, mixins, and functions as possible, so that the custom component will be affected by any customization of the global options and Bootstrap variables. Secondly, the component will be based on a base class that groups as many shared properties as possible, and then a range of modifier classes that group individual styles together.

The custom component that we’re going to create is a timeline component, and it looks like this:

Figure 10.7 – The custom timeline component

In the screenshot, we see the base class being used,...