I recently designed a webpage using Bootstrap and CSS. My main goal is to have my two blockquotes centered on the page while keeping the text left-aligned (which is the default behavior for the selected classes in Bootstrap).
To see the full code, take a look at it on CodePen.
Here is an example of the HTML code for one of the blockquotes:
<blockquote>
<p>A wise man proportions his belief to the evidence.</p>
<footer class="blockquote-footer"><cite>David Hume</cite></footer>
</blockquote>
Below is the CSS code I used to style my blockquotes:
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 500px;
margin: 3em 0;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
/* An element with position: absolute; is positioned relative to the nearest positioned ancestor, which is probably the blockquote */
position: absolute;
/* Offsets from the edges of element's containing block, ancestor to which the element is relatively positioned */
left: -20px; /* Negative moves it left */
top: -20px; /* Negative moves it toward the top */
color: #7a7a7a;
}
blockquote cite {
color: #999;
font-size: 14px;
margin-top: 5px;
}