Aligning quotation marks with bottom of row in Bootstrap 3? - html

Question

I'm trying to create some nice looking blockquotes in Bootstrap by stacking some rows with quotes above and below the quotation, like so just to give you a rough example ( can be seen here (http://www.bootply.com/weEUvuQfw2 ). As seen in the bootply example, the left quotation mark hovers high above the quote, since its character is originally that high when used in a sentence. I imagine it's got to be something simple, but what can I do to get the left quote to hover at the bottom of the top left cell of this grid? setting a negative margin or padding doesn't seem to do it. Any ideas?
<div class="container">
<div class="row right">
<div class=" col-lg-3 ">
<font size="40">“</font>
</div>
<div class="col-lg-6 ">
</div>
<div class="col-lg-3 ">
</div>
</div>
<div class="row center">
<div class=" col-lg-3 ">
</div>
<div class="col-lg-6 ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet blandit libero. Nullam at tincidunt risus. Nam quis suscipit ligula, ut cursus nunc. Nulla eget eros diam. Aenean bibendum accumsan velit in dapibus. Pellentesque sodales leo nec lacus consequat, nec tempor nibh sollicitudin. Fusce mollis luctus ultrices. Quisque tempus placerat velit, at varius libero pulvinar eu. Curabitur sit amet est velit. Praesent id eleifend nulla, eu iaculis lacus. Integer imperdiet, tellus nec tristique mattis, magna quam luctus tellus, nec semper enim felis eget nisl.
</div><!--
--><div class="col-lg-3 ">
</div>
</div>
<div class="row left">
<div class=" col-lg-3 ">
</div>
<div class="col-lg-6 ">
</div><!--
--><div class="col-lg-3 ">
<font size="72">”
</font></div><font size="72">
</font></div><font size="72">
</font></div><!-- /.container -->
And CSS
.center {
text-align: center;
}
.right {
text-align: right;
}
.left {
text-align: left;
}

Answer 1

Are you looking for something like so?
HTML:
<div class="container">
<div class="row right">
<div class=" col-lg-3 ">
<font size="40">“</font>
</div>
<div class="col-lg-6 ">
</div><!--
--><div class="col-lg-3 ">
</div>
</div>
<div class="row center">
<div class=" col-lg-3 ">
</div>
<div class="col-lg-6 ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet blandit libero. Nullam at tincidunt risus. Nam quis suscipit ligula, ut cursus nunc. Nulla eget eros diam. Aenean bibendum accumsan velit in dapibus. Pellentesque sodales leo nec lacus consequat, nec tempor nibh sollicitudin. Fusce mollis luctus ultrices. Quisque tempus placerat velit, at varius libero pulvinar eu. Curabitur sit amet est velit. Praesent id eleifend nulla, eu iaculis lacus. Integer imperdiet, tellus nec tristique mattis, magna quam luctus tellus, nec semper enim felis eget nisl.
</div><!--
--><div class="col-lg-3 ">
</div>
</div>
<div class="row left">
<div class=" col-lg-3 ">
</div>
<div class="col-lg-6 ">
</div><!--
--><div class="col-lg-3 ">
<font size="72">”
</font></div><font size="72">
</font></div><font size="72">
</font></div><!-- /.container -->
CSS:
.center {
text-align: center;
}
.right {
text-align: left;
margin-bottom: -20px;
}
.left {
text-align: left;
}
Here is a fiddle: http://jsfiddle.net/4g0gp5pp/

Answer 2

That's a lot of markup to create something really simple.
DEMO: http://jsbin.com/hadapo/1/edit
HTML:
<blockquote class="quotemarks">
<p>Words go here</p>
<footer>Someone</footer>
</blockquote>
CSS
.quotemarks:before,
.quotemarks:after {
text-align: center;
font-size: 60px;
line-height: 1;
}
.quotemarks:before {
content: "\201C";
position: relative;
bottom: -20px;
}
.quotemarks:after {
content: "\201D"
}
.quotemarks {
border: 0;
padding: 0;
text-align: center;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.quotemarks footer {
text-indent: -10px
}