"WordPress Blockquote Design & HTML"
Bootstrap 3.3.0 Snippet by jituchauhan

<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"> <div class="row"> <h2>Blockquote Variations</h2> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>Simple Block Quote</h1> <blockquote>Eros pretium nam magna ne diam commodo viverra eget et leo curabitur a diam semper e tempor odio sed vehicula ornare libero viva acsod orna libero unc laoreet turpis elit non eleifend eget.</blockquote> </div> <div class="col-md-12"> <h1>Left Align Blockquote / 50% off width</h1> <blockquote class="alignleft">Eros pretium nam magna ne diam commodo viverra eget et leo curabitur a diam semper e tempor odio sed vehicula ornare libero viva acsod orna libero unc laoreet turpis elit non eleifend eget.</blockquote> </div> <div class="col-md-12"> <h1>Right Align Blockquote / 50% off width</h1> <blockquote class="alignright">Eros pretium nam magna ne diam commodo viverra eget et leo curabitur a diam semper e tempor odio sed vehicula ornare libero viva acsod orna libero unc laoreet turpis elit non eleifend eget.</blockquote> </div> </div> </div> Credit @ <a href="http://jituchauhan.com/" target="_blank">Jitu</a>
blockquote { padding: 10px 20px; margin: 0 0 20px; font-size: 18px; border-left: 5px solid #d37fb0; color: #d37fb0; } blockquote.alignright { max-width: 50%; float:right; color: #d37fb0; text-align:right;border-right: 5px solid #d37fb0; border-left:transparent; } blockquote.alignleft { max-width: 50%;float:left;}

Related: See More


Questions / Comments: