Extending Bootstrap 5 classes to create custom components

In this section, we will see how we can extend existing Bootstrap 5 classes using the @extend rule of Sass. With this method, it will be possible to create the same UI elements, but with less HTML code, which is better for readability.

We will use this method for three of our UI elements in our website: the Page title global module, the blockquote in the Reviews section of the Product page, and the bottom border of the Summary section of the Cart page.

The Page title global module

The Page title global module is used on all pages except for the Home page and Product page. The visual style of this module looks like the jumbotron component found in previous versions of Bootstrap. We will now extend the Bootstrap 5 classes being used by the Page title global module to make the markup simpler. We will use the name jumbotron for this custom component.

In our HTML for the new custom component, we have to keep a parent...