"A Better Blockquote"
Bootstrap 3.3.0 Snippet by MohamedSamiKhiari

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <blockquote class="quote-box"> <p class="quotation-mark"> “ </p> <p class="quote-text"> Don't believe anything that you read on the internet, it may be fake. </p> <hr> <div class="blog-post-actions"> <p class="blog-post-bottom pull-left"> Abraham Lincoln </p> <p class="blog-post-bottom pull-right"> <span class="badge quote-badge">896</span>  ❤ </p> </div> </blockquote> </div>
blockquote{ border-left:none } .quote-badge{ background-color: rgba(0, 0, 0, 0.2); } .quote-box{ overflow: hidden; margin-top: -50px; padding-top: -100px; border-radius: 17px; background-color: #4ADFCC; margin-top: 25px; color:white; width: 325px; box-shadow: 2px 2px 2px 2px #E0E0E0; } .quotation-mark{ margin-top: -10px; font-weight: bold; font-size:100px; color:white; font-family: "Times New Roman", Georgia, Serif; } .quote-text{ font-size: 19px; margin-top: -65px; }

Related: See More


Questions / Comments: