<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <div class="row"> <div class="col-12 col-lg-4 d-flex justify-content-center"> <div class="row"> <div class="col-12 d-flex justify-content-center"> <svg class="circle"> <circle class="gold-circle"/> <image xlink:href="http://news.swp.sou.edu/wp-content/uploads/sites/3/2015/04/Stephanie-Neuerburg-Headshot.jpg" class="circle-img" style="border-radius:50%;"></image> </svg> </div> <div class="col-md-8 offset-md-2"> <h3 class="d-flex justify-content-center quote-name">Trisha H.</h3> </div> <div class="col-md-8 offset-md-2"> <blockquote class="blockquote d-flex justify-content-center"> <p class="mb-0">Being a peer leader has equipped me to empower my fellow students to find their place and opportunities on campus and to encourage personal and professional development.</p> </blockquote> </div> </div> </div> <div class="col-12 col-lg-4 d-flex justify-content-center"> <div class="row"> <div class="col-12 d-flex justify-content-center"> <svg class="circle"> <circle class="gold-circle"/> <image xlink:href="http://news.swp.sou.edu/wp-content/uploads/sites/3/2015/04/Stephanie-Neuerburg-Headshot.jpg" class="circle-img" style="border-radius:50%;"></image> </svg> </div> <div class="col-md-8 offset-md-2"> <h3 class="d-flex justify-content-center quote-name">Trisha H.</h3> </div> <div class="col-lg-8 offset-md-2"> <blockquote class="blockquote d-flex justify-content-center"> <p class="mb-0">Being a peer leader has equipped me to empower my fellow students to find their place and opportunities on campus and to encourage personal and professional development.</p> </blockquote> </div> </div> </div> <div class="col-12 col-lg-4 d-flex justify-content-center"> <div class="row"> <div class="col-12 d-flex justify-content-center"> <svg class="circle"> <circle class="gold-circle"/> <image xlink:href="http://news.swp.sou.edu/wp-content/uploads/sites/3/2015/04/Stephanie-Neuerburg-Headshot.jpg" class="circle-img" style="border-radius:50%;"></image> </svg> </div> <div class="col-12"> <h3 class="d-flex justify-content-center quote-name">Trisha H.</h3> </div> <div class="col-md-12 col-lg-8 offset-lg-2"> <blockquote class="blockquote d-flex justify-content-center"> <p class="mb-0">Being a peer leader has equipped me to empower my fellow students to find their place and opportunities on campus and to encourage personal and professional development.</p> </blockquote> </div> </div> </div> </div> </div>

.circle { width: 200px; height: 200px; } .gold-circle { cx: 100; cy: 100; r: 100; fill: #FFB300; } .circle-img { x: 10; y: -25; width: 96%; clip-path: circle(40% at 50% 50%) } .quote-name { font-style: italic; padding-top: 25px; } .blockquote { padding-bottom: 25px; }