<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <script src="https://use.fontawesome.com/f59bcd8580.js"></script> <div class="container"> <div class="row"> <div class="col-12"> <section class="pt-5 pb-5"> <div class="container"> <h2 class="text-center">What other say for us</h2> <hr class="midline"> <h5 class="text-center mb-5">Our team created best opportunities for your business.</h5> <div class="card col-md-12 mt-2"> <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="100000"> <div class="w-100 carousel-inner mb-5" role="listbox"> <div class="carousel-item active"> <div class="bg"></div> <div class="row"> <div class="col-md-6"> <div class="carousel-caption"> <div class="row"> <div class="col-sm-3 col-4 align-items-start"> <img src="https://bootstraplily.com/demo/testimonial-slider/2.jpg" alt="" class="rounded-circle img-fluid"> </div> <div class="col-sm-9 col-8"> <h2>Micheal Smith - <span>Web Developer</span></h2> <small>Well incremented. Comes with recommended workout. I'm using it to help with bladder leakage issues that I've been experiencing since a recent vasectomy.</small> <small class="smallest mute">- willi</small> </div> </div> </div> </div> <div class="col-md-6"> <div class="carousel-caption"> <div class="row"> <div class="col-sm-3 col-4 align-items-start"> <img src="https://bootstraplily.com/demo/testimonial-slider/3.jpg" alt="" class="rounded-circle img-fluid"> </div> <div class="col-sm-9 col-8"> <h2>Helena Doe - <span>Architect</span></h2> <small>Well incremented. Comes with recommended workout. I'm using it to help with bladder leakage issues that I've been experiencing since a recent vasectomy.</small> <small class="smallest mute">- willi</small> </div> </div> </div> </div> </div> </div> <div class="carousel-item"> <div class="bg"></div> <div class="row"> <div class="col-md-6 col-12"> <div class="carousel-caption"> <div class="row"> <div class="col-sm-3 col-4 align-items-start"> <img src="https://bootstraplily.com/demo/testimonial-slider/2.jpg" alt="" class="rounded-circle img-fluid"> </div> <div class="col-sm-9 col-8"> <h2>John Doe - <span>Ceo Mobile company</span></h2> <small>Well incremented. Comes with recommended workout. I'm using it to help with bladder leakage issues that I've been experiencing since a recent vasectomy.</small> <small class="smallest mute">- willi</small> </div> </div> </div> </div> <div class="col-md-6 col-12"> <div class="carousel-caption"> <div class="row"> <div class="col-sm-3 col-4 align-items-start"> <img src="https://bootstraplily.com/demo/testimonial-slider/3.jpg" alt="" class="rounded-circle img-fluid"> </div> <div class="col-sm-9 col-8"> <h2>Helena Doe - <span>Architect</span></h2> <small>Well incremented. Comes with recommended workout. I'm using it to help with bladder leakage issues that I've been experiencing since a recent vasectomy.</small> <small class="smallest mute">- willi</small> </div> </div> </div> </div> </div> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"><i class="fa fa-chevron-left"></i></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"><i class="fa fa-chevron-right"></i></span> <span class="sr-only">Next</span> </a> </div> </div> </div> </section> </div> </div> </div> <div class="container text-center small text-muted mt-4 mb-5"> Design by <a href="https://bootstraplily.com/" target="_blank">www.bootstraplily.com</a> </div>

.card { margin: 0 auto; border: none; } .card .carousel-item { min-height: 190px; } .card .carousel-caption { padding: 0; right: 15px; left: 15px; top: 15px; color: #3d3d3d; border: 1px solid #ebebeb; min-height:175px; padding: 15px; } .carousel-control-prev-icon i, .carousel-control-next-icon i{ margin-top:8px; display:inline-block; } .card .carousel-caption .col-sm-3 { display: flex; align-items: center; } .card .carousel-caption .col-sm-9 { text-align: left; } .card .carousel-control-prev, .card .carousel-control-next { color: #3d3d3d !important; opacity: 1 !important; } .carousel-control-prev-icon, .carousel-control-next-icon { background-image: none; color: #fff; font-size: 14px; background-color: #cd3a54; height: 32px; line-height: 32px; width: 32px; } .carousel-control-prev-icon:hover, .carousel-control-next-icon:hover { opacity: 0.85; } .carousel-control-prev { left: 40%; top: 110%; } .carousel-control-next { right: 40%; top: 110%; } .midline { width: 60px; border-top: 1px solid #d43025; } .carousel-caption h2 { font-size: 14px; } .carousel-caption h2 span { color: #cd3a54; } @media (min-width: 320px) and (max-width: 575px) { .carousel-caption { position: relative; } .card .carousel-caption { left: 0; top: 0; margin-bottom: 15px; } .card .carousel-caption img { margin: 0 auto; } .carousel-control-prev { left: 35%; top: 105%; } .carousel-control-next { right: 35%; top: 105%; } .card .carousel-caption h3 { margin-top: 0; font-size: 16px; font-weight: 700; } } @media (min-width: 576px) and (max-width: 767px) { .carousel-caption { position: relative; } .card .carousel-caption { left: 0; top: 0; margin-bottom: 15px; } .card .carousel-caption img { margin: 0 auto; } .card .carousel-caption h3, .card .carousel-caption small { text-align: center; } .carousel-control-prev { left: 35%; top: 105%; } .carousel-control-next { right: 35%; top: 105%; } } @media (min-width: 767px) and (max-width: 991px) { .card .carousel-caption h3 { margin-top: 0; font-size: 16px; font-weight: 700; } }