<div class="bg-dark p-5 mx-auto mt-3 mb-3" style="max-width:600px;">
  <div id="carouselTestimonial" class="carousel carousel-testimonial slide" data-ride="carousel">
	<ol class="carousel-indicators">
	  <li data-target="#carouselTestimonial" data-slide-to="0" class="active"></li>
	  <li data-target="#carouselTestimonial" data-slide-to="1"></li>
	  <li data-target="#carouselTestimonial" data-slide-to="2"></li>
	</ol>
	<div class="carousel-inner">
	  <div class="carousel-item text-center active">
		<div class="carousel-testimonial-img p-1 border rounded-circle m-auto">
		  <img class="d-block w-100 rounded-circle" src="https://bootstrapplusplus.com/images/pro5.jpg" alt="First slide">
		</div>
		<h5 class="mt-4 mb-0"><strong class="text-warning text-uppercase">SARA A. MORAN</strong></h5>
		<h6 class="text-dark m-0">Web Developer</h6>
		<p class="m-0 pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, consectetur adipiscing elit varius quam at, luctus dui. Mauris magna metus consectetur adipiscing elit.</p>
	  </div>
	  <div class="carousel-item text-center">
		<div class="carousel-testimonial-img p-1 border rounded-circle m-auto">
		  <img class="d-block w-100 rounded-circle" src="https://bootstrapplusplus.com/images/pro4.jpg" alt="Second slide">
		</div>
		<h5 class="mt-4 mb-0"><strong class="text-warning text-uppercase">STEVE FONSI</strong></h5>
		<h6 class="text-dark m-0">Web Designer</h6>
		<p class="m-0 pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, consectetur adip varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel.</p>
	  </div>
	  <div class="carousel-item text-center">
		<div class="carousel-testimonial-img p-1 border rounded-circle m-auto">
		  <img class="d-block w-100 rounded-circle" src="https://bootstrapplusplus.com/images/pro6.jpg" alt="Third slide">
		</div>
		<h5 class="mt-4 mb-0"><strong class="text-warning text-uppercase">SANDRA M. GARCIA</strong></h5>
		<h6 class="text-dark m-0">Seo Analyst</h6>
		<p class="m-0 pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, consectetur adipiscing elit consectetur adipiscing elit luctus dui. Mauris magna metus.</p>
	  </div>
	</div>
	<a class="carousel-control-prev" href="#carouselTestimonial" role="button" data-slide="prev">
	  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
	  <span class="sr-only">Previous</span>
	</a>
	<a class="carousel-control-next" href="#carouselTestimonial" role="button" data-slide="next">
	  <span class="carousel-control-next-icon" aria-hidden="true"></span>
	  <span class="sr-only">Next</span>
	</a>
  </div>
</div>


<!-- Info -->
<div style="font-family:'Open Sans';" class="w-100 text-center p-2">
<span class="w-100 d-block">Based on <a href="http://bootstrapplusplus.com/" target="_blank" class="text-warning font-weight-bold"><u>Bootstrap++</u></a> | <a href="https://codepen.io/arafkarim/pen/pZVvdO" target="_blank">Here</a> is the Light Edition</span>
Made with <i class="fa fa-heart text-danger"></i> & <i class="fa fa-coffee text-secondary"></i> by <b>Araf Karim</b> ( <a href="http://twitter.com/arafkarim" target="_blank">Twitter</a> | <a href="http://github.com/arafkarim" target="_blank">Github</a> )
        </div>

External CSS

  1. https://cdn.rawgit.com/arafkarim/BootstrapPlusPlus/a32c1a63/dist/dark/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css
  3. https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js
  3. https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js