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>

      <!-- Customizing the blockquote element -->
      <div class="container">
       <div class="row mt-5 pt-5">
       <div class="col-lg-12">
       <blockquote class="blockquote">
       <p>Blockquotes can go left-to-right. Lorem ipsum dolor sit amet,  
       consectetur adipisicing elit. Repellat dolor pariatur,  
       distinctio doloribus aliquid recusandae soluta tempore. Vero a,  
       eum.</p>
       <footer class="blockquote-footer">Some Guy,
       <cite>A famous publication</cite> 
       </footer> 
       </blockquote>
       </div>
       <div class="col-lg-12">
       <blockquote class="blockquote blockquote-reverse bg-white">
       <p>Blockquotes can go right-to-left. Lorem ipsum dolor sit amet,  
       consectetur adipisicing elit. Quisquam repellendus sequi officia   
       nulla quaerat quo.</p>
       <footer class="blockquote-footer">Another Guy,
       <cite>A famous movie quote</cite> 
       </footer> 
       </blockquote>
       </div>
       <div class="col-lg-12">
       <blockquote class="blockquote card-blockquote">
       <p>You can use the <code>.card-blockquote</code> class. Lorem  
       ipsum dolor sit amet, consectetur adipisicing elit. Aliquid  
       accusamus veritatis quasi.</p>
       <footer class="blockquote-footer">Some Guy,
       <cite>A reliable source</cite> 
       </footer> 
       </blockquote>
       </div>
       <div class="col-12">
       <blockquote class="blockquote bg-info">
       <p>Blockquotes can go left-to-right. Lorem ipsum dolor sit amet. 
       </p>
       <footer class="blockquote-footer">Some Guy,
       <cite>A famous publication</cite> 
       </footer> 
       </blockquote>
       </div>
       </div>
      </div>

1. In main-03-04.scss, add the following code:

      blockquote.blockquote {
       padding: 2rem 2rem 2rem 4rem;
       margin: 2rem;
       quotes: "\201C" "\201D";
       position: relative;
      }

      blockquote:before { 
       content: open-quote;
       font-family: Georgia, serif;
       font-size: 12rem;
       opacity: .04;
       font-weight: bold;
       position:absolute;
       top:-6rem;
       left: 0;
      } 
      blockquote:after { 
       content: close-quote;
       font-size: 12rem;
       opacity: .04;
       font-family: Georgia, serif;
       font-weight: bold;
       position:absolute;
       bottom:-11.3rem;
       right: 0;
      }

1. In main.scss, uncomment @include for main-03-04.scss.
2. Run grunt sass and harp server.