Customizing the blockquote element with CSS

In this recipe, we will examine how to use and modify Bootstrap's blockquote element. The technique we'll employ is using the :before and :after CSS pseudo-classes. We will add HTML entities to the CSS content property, and then style their position, size, and color.

Getting ready

Navigate to the recipe4 page of the chapter 3 website, and preview the final result that we are trying to achieve (its preview is available in chapter3-complete/app, after running harp server in the said folder). To get this look, we are using all the regular Bootstrap 4 CSS classes, with the addition of .bg-white, added in the preceding recipe. In this recipe, we will add custom styles to .blockquote.

How to do it...

1. In the empty chapter3/start/app/recipe4.ejs file, add the following code:

      <div class="container mt-5">
       <h1>Chapter 3, Recipe 4:</h1>
       <p class="lead">Customize the Blockquote Element with CSS</p>
      </div...