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 ...

Get Bootstrap 4 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.