<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"> <div class="col-md-6"> <section class="testimonial" aria-label="testimonal"> <div class="row"> <div class="col-md-5"> <img class="img-responsive" src="https://scontent-sit4-1.xx.fbcdn.net/v/t1.0-9/13417432_872785662833463_7712321988284559378_n.jpg?oh=c4db85f59f8311a6b1b102f71cc4576d&oe=58A4F449" alt="description of image" alt="description of image"> </div> <div class="col-md-7"><blockquote aria-label="testimonial comment">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took make a type specimen book. <cite aria-label="author of testimonial">- Some Student, '17</cite> </blockquote> </div> </div> </section> </div> </div> </div>

body { padding-top:50px; font-family: Arial, Helvetica, sans-serif; } a { color:#0e48ad; } a:focus, a:hover { color:#123294; } h1, h2, h3, h4, h5, h6 { font-family:"Source Sans Pro",sans-serif; font-weight:bold; } .h--alt { font-weight: 300; margin-top:0; } h5 { font-size:16px; } h6 { font-size:14px; } a { color:#0e48ad; } a:focus, a:hover { color:#123294; } /* -------------------*/ /*-----------------------*/ /*----- TESTIMONIAL -----*/ /*-----------------------*/ .testimonial { padding: 30px 15px 30px 30px; border-style: solid; border-width:5px 1px 1px; margin:15px 0; border-color: #cfb87c #ddd #ddd; } .testimonial img { border: 1px solid #ddd; margin: auto auto 15px; width: 100%; } .testimonial blockquote { font-family: "source sans pro"; font-size: 16px; font-weight: 300; } .testimonial blockquote:before { color: #ccc; content: open-quote; font-size: 5em; line-height: 0em; margin-right: 0.1em; vertical-align: -0.4em; } .testimonial blockquote:after { content: close-quote; visibility:hidden; } .col-md-3 .testimonial { padding: 30px; } .col-md-4 .testimonial .col-md-5, .col-md-3 .testimonial .col-md-5, .col-md-2 .testimonial .col-md-5, .col-md-1 .testimonial .col-md-5 { width:100%; margin: 0 0 15px; } .col-md-4 .testimonial .col-md-7, .col-md-3 .testimonial .col-md-7, .col-md-2 .testimonial .col-md-7, .col-md-1 .testimonial .col-md-7 { padding: 0; width: 100%; } .testimonial blockquote cite { float: left; font-weight: 600; margin-top: 10px; width: 100%; } @media (min-width:992px) { .testimonial img { max-width:200px; } }