Extending the blockquote styles with Sass

In this recipe, we will show how to extend the blockquote styles using Sass. To make this work, we will have to rely both on the @include for main-03-04.scss and the @include for main-03-05.scss. Also, since we are overriding Bootstrap variables, our @include element for this recipe has to be added before the addition of the Bootstrap SCSS files.

Getting ready

Navigate to the recipe5 page of the chapter 3 website, and preview the final result that we are trying to achieve. To get this look, we need to override several SCSS variables from Bootstrap 4, as well as declare a new variable to be used in the box-shadow effect applied around the blockquote element.

How to do it...

1. Open main-03-05.scss and add the following code to it:

      /*
      FROM _type.scss, line 110:

      .blockquote {
       padding: ($spacer / 2) $spacer;
       margin-bottom: $spacer;
       font-size: $blockquote-font-size;
       border-left: $blockquote-border-width solid $blockquote...