"Testimonial section"
Bootstrap 4.1.1 Snippet by koshikojha

<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 ----------> <section class="section-ptb bg-white bg-5"> <div class="container"> <div class="row text-center"> <div class="col-12"> <div class="heading mb-80"> <h2>Testimonials</h2> <p class="mb-20">Looked up one of the more obscure Latin words, consectetur, from <br class="d-none d-md-block"> a Lorem Ipsum passage, and going</p> <hr class="line bw-2 mx-auto line-sm mb-5"> <hr class="line bw-2 mx-auto"> </div> </div> </div> <div class="row"> <div class="col-12"> <div class="client-testimonial position-relative"> <div class="client-nav"> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#client1" data-toggle="tab"> <img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/1.png" alt="Client Image"> </a> </li> <li class="nav-item"> <a class="nav-link" href="#client2" data-toggle="tab"> <img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/2.png" alt="Client Image"> </a> </li> <li class="nav-item"> <a class="nav-link" href="#client3" data-toggle="tab"> <img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/3.png" alt="Client Image"> </a> </li> <li class="nav-item"> <a class="nav-link" href="#client4" data-toggle="tab"> <img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/4.png" alt="Client Image"> </a> </li> <li class="nav-item"> <a class="nav-link" href="#client5" data-toggle="tab"> <img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/5.png" alt="Client Image"> </a> </li> </ul> </div> <div class="row text-center"> <div class="col-10 col-md-8 col-lg-6 mx-auto"> <div class="tab-content"> <div class="tab-pane fade show active" id="client1"> <div class="client-thumb mx-auto mb-25"> <img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/1.png" alt="Client Image"> </div> <div class="client-desc bg-white d-flex align-items-center"> <div class="text mx-auto"> <h4 class="mb-10">Evelyn Riley</h4> <h6>Hade Of Idea</h6> <p>Richard McClintock, a Latin professor at Hampden <br class="d-none d-lg-block">College in Virginia, looked up one of the more obscure Latin words</p> </div> </div> </div> <!-- Single Client End --> <div class="tab-pane fade" id="client2"> <div class="client-thumb mx-auto mb-25"> <img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/2.png" alt="Client Image"> </div> <div class="client-desc bg-white d-flex align-items-center"> <div class="text mx-auto"> <h4 class="mb-10">Ethan Green</h4> <h6>Photograper</h6> <p>Many desktop publishing packages and web page editors <br class="d-none d-lg-block"> now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum'</p> </div> </div> </div> <!-- Single Client End --> <div class="tab-pane fade" id="client3"> <div class="client-thumb mx-auto mb-25"> <img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/3.png" alt="Client Image"> </div> <div class="client-desc bg-white d-flex align-items-center"> <div class="text mx-auto"> <h4 class="mb-10">Marie Soto</h4> <h6>Designer</h6> <p>Virginia, looked up one of the more obscure Latin <br class="d-none d-lg-block"> words, consectetur, from a Lorem Ipsum passage, and going through the cites of looked</p> </div> </div> </div> <!-- Single Client End --> <div class="tab-pane fade" id="client4"> <div class="client-thumb mx-auto mb-25"> <img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/4.png" alt="Client Image"> </div> <div class="client-desc bg-white d-flex align-items-center"> <div class="text mx-auto"> <h4 class="mb-10">Willie Munoz</h4> <h6>Content Writer</h6> <p>Words which don't look even slightly believable. <br class="d-none d-lg-block">If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything</p> </div> </div> </div> <!-- Single Client End --> <div class="tab-pane fade" id="client5"> <div class="client-thumb mx-auto mb-25"> <img class="drop-shadow" src="http://regaltheme.com/tf/multi/rnr/assets/img/client/thumb/5.png" alt="Client Image"> </div> <div class="client-desc bg-white d-flex align-items-center"> <div class="text mx-auto"> <h4 class="mb-10">Susan Gardner</h4> <h6>Manager</h6> <p>The point of using Lorem Ipsum is that it has a more <br class="d-none d-lg-block"> normal distribution of letters, as opposed to using 'Content here, content here point of using</p> </div> </div> </div> <!-- Single Client End --> </div> </div> </div> </div> </div> </div> </div> </section>
html{font-size:10px}body{font-size:1.4rem}.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active, .nav-tabs, .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{border:none;} .h2, h2 {font-size: 3rem;} .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {margin-bottom:1.5rem;font-family:"Dosis", sans-serif;font-weight:600;line-height:1.2;color:#1c223a;} .client-testimonial .drop-shadow { -webkit-filter: drop-shadow(0px 15px 50px rgba(2, 173, 136, 0.2)); -moz-filter: drop-shadow(0px 15px 50px rgba(2, 173, 136, 0.2)); -o-filter: drop-shadow(0px 15px 50px rgba(2, 173, 136, 0.2)); filter: drop-shadow(0px 15px 50px rgba(2, 173, 136, 0.2)); } .bg-5 { background-image: url("http://regaltheme.com/tf/multi/rnr/assets/img/bg/5.png"); background-position: center 65%; background-size: auto; background-repeat: no-repeat; } .client-testimonial .client-nav .nav-item { position: absolute; z-index: 5; width: 10.5rem; } .client-testimonial .client-nav .nav-item:nth-child(1) { top: 2.5rem; right: 16%; width: 7rem; } .client-testimonial .client-nav .nav-item:nth-child(2) { bottom: 3rem; right: 0; } @media (min-width: 1281px) { .client-testimonial .client-nav .nav-item:nth-child(2) { right: -3rem; } } .client-testimonial .client-nav .nav-item:nth-child(3) { bottom: 9rem; left: 4%; } .client-testimonial .client-nav .nav-item:nth-child(4) { top: -2rem; left: 0; width: 7rem; } @media (min-width: 1281px) { .client-testimonial .client-nav .nav-item:nth-child(4) { left: -8rem; } } .client-testimonial .client-nav .nav-item:nth-child(5) { top: -9rem; right: 0; width: 7rem; } @media (min-width: 1281px) { .client-testimonial .client-nav .nav-item:nth-child(5) { right: -5.5rem; } } @media (max-width: 767.98px) { .client-testimonial .client-nav .nav-item { position: relative !important; top: 0 !important; left: 0 !important; right: inherit; width: 7rem !important; } } .client-testimonial .tab-content .fade { -webkit-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; transition: all 0.4s ease-in; } .client-testimonial .tab-content .client-thumb { width: 10.5rem; } .client-testimonial .tab-content .client-desc { -webkit-box-shadow: 0px 15px 50px 0px rgba(115, 115, 115, 0.06); box-shadow: 0px 15px 50px 0px rgba(115, 115, 115, 0.06); min-height: 21rem; padding: 2rem; } .client-testimonial .tab-content .client-desc h6 { font-size: 1.3rem; } .section-ptb, .section-pt, .section-pb { padding-top: 12rem; padding-bottom: 12rem; } @media (min-width: 768px) and (max-width: 991.98px) { .section-ptb, .section-pt, .section-pb { padding-top: 8rem; padding-bottom: 8rem; } } @media (max-width: 767.98px) { .section-ptb, .section-pt, .section-pb { padding-top: 6rem; padding-bottom: 6rem; } } hr.line { margin: 0; border-color: #1c223a; border-width: 1px; width: 4.5rem; } hr.line.line-sm { width: 8.6rem; } hr.line.bw-2 { border-width: 2px; } .mb-5 { margin-bottom: 0.5rem !important; } .mb-80 { margin-bottom: 8rem !important; } .mb-20 { margin-bottom: 2rem !important; } .mb-25 { margin-bottom: 2.5rem !important; } img { max-width: 100%; }

Related: See More


Questions / Comments: