How it works...

In this recipe, we are using the regular blockquote HTML element and Bootstrap's classes for styling it. To make it look different, we primarily use the following tweaks:

• Setting the blockquote.blockquote position to relative
• Setting the :before and :after pseudo-classes, position to absolute
• In blockquote.blockquote, setting the padding and margin. Also, assigning the values for opening and closing quotes, using CSS (ISO) encoding for the two HTML entities
• Using Georgia font to style the content property in pseudo-classes
• Setting the font-size of pseudo-classes to a very high value and giving the font a very high opacity, so as to make it become more background-like
• With absolute positioning in place, it is easy to place the quotes in the exact location, using negative rem values