There will be occasions on which you may want to display a quote or citation on your site. As this requirement is a common scenario, Bootstrap developers offer the blockquote class for displaying quotes. The style rule for this class is not very complex. It merely adjusts the font size to 1.25 rem and sets the bottom margin to 1 rem. Let's go ahead and apply this class to an important motivational quote by one of the founders of MyPhoto that underpins the very foundations of the company (refer to figure 4.23):

<blockquote class="blockquote">
     <p>I am very motivated today.</p>
     <footer class="blockquote-footer">The Founder,
         <cite>Times Magazine</cite>
     </footer>
 </blockquote>

Note how we not only display the quote itself but also provide a source using the optional blockquote-footer class. Bootstrap defines this class as follows:

.blockquote-footer {
     display: block;
     font-size: 80%;
     color: #868e96;
}
.blockquote-footer::before {
     content: "2014 0A0";
}

Instead of a left-hand border and left alignment, we can apply a right-hand border and align the source to the right using the text-right class (similarly, the text can be centered using text-center):

<blockquote class="blockquote text-right">
     <p>I am very motivated today.</p>
     <footer class="blockquote-footer">The Founder,
         <cite>Times Magazine</cite>
     </footer>
 </blockquote>