Bootstrap Testimonials Example

Testimonials bootstrap 4 snippet

Download Files

Download Files contains - HTML,CSS,JS,Images Files

With cover and overlapped profile picture

                                        
                                      @import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800);
.testimonial2 {
  font-family: "Montserrat", sans-serif;
  color: #8d97ad;
  font-weight: 300;
}

.testimonial2 h1,
.testimonial2 h2,
.testimonial2 h3,
.testimonial2 h4,
.testimonial2 h5,
.testimonial2 h6 {
  color: #3e4555;
}

.testimonial2 h5 {
    line-height: 22px;
    font-size: 18px;
  font-weight: 400;
}

.testimonial2 .font-weight-medium {
  font-weight: 500;
}

.testimonial2 .bg-light {
  background-color: #f4f8fa !important;
}

.testimonial2 .subtitle {
  color: #8d97ad;
  line-height: 24px;
}

.testimonial2 .testi2 .image-thumb {
  background: url(https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/testimonial/greadint-bg.png) no-repeat top center;
  text-align: center;
  padding: 10% 0;
}

.testimonial2 .testi2 .image-thumb img {
  width: 400px;
}

.testimonial2 .testi2 .owl-dots {
  display: inline-block;
  position: relative;
  top: -100px;
}

.testimonial2 .testi2 .owl-dots .owl-dot {
  border-radius: 100%;
  width: 70px;
  height: 70px;
  background-size: cover;
  margin-right: 10px;
  opacity: 0.4;
  cursor: pointer;
}

.testimonial2 .testi2 .owl-dots .owl-dot span {
  display: none;
}

.testimonial2 .testi2 .owl-dots .owl-dot.active,
.testimonial2 .testi2 .owl-dots .owl-dot:hover {
  opacity: 1;
}

@media (max-width: 767px) {
  .testimonial2 .testi2 .owl-dots {
    top: 0px;
  }
}

.testimonial2 .btn-md {
    padding: 18px 0px;
    width: 60px;
    height: 60px;
    font-size: 20px;
}

.testimonial2 .btn-danger {
    background: #ff4d7e !important;
    border: 1px solid #ff4d7e !important;
}      
                                        
                                    

                                        
                                         $('.testi2').owlCarousel({
     loop: true,
     margin: 20,
     nav: false,
     dots: true,
     autoplay: true,
     responsiveClass: true,
     responsive: {
    0: {
      items: 1,
      nav: false
    },
    1170: {
      items: 1
    }
     }
   });

   $(function() {
    // 1) ASSIGN EACH 'DOT' A NUMBER
    dotcount = 1;
    $('.testi2 .owl-dot').each(function() {
     $(this).addClass('dotnumber' + dotcount);
     $(this).attr('data-info', dotcount);
     dotcount = dotcount + 1;
    });
    // 2) ASSIGN EACH 'SLIDE' A NUMBER
    slidecount = 1;
    $('.testi2 .owl-item').not('.cloned').each(function() {
     $(this).addClass('slidenumber' + slidecount);
     slidecount = slidecount + 1;
    });
    $('.testi2 .owl-dot').each(function() {
     grab = jQuery(this).data('info');
     slidegrab = $('.slidenumber' + grab + ' img').attr('src');
     console.log(slidegrab);
     $(this).css("background-image", "url(" + slidegrab + ")");
    });
    // THIS FINAL BIT CAN BE REMOVED AND OVERRIDEN WITH YOUR OWN CSS OR FUNCTION, I JUST HAVE IT
    // TO MAKE IT ALL NEAT 

   });       
                                        
                                    

Credits

Wrappixel.com

More Bootstrap UI Components

Mordern Style Footer

144 0 footer,BS4

Sports Content Block

165 0 contents,BS4

Simple Feature Block

140 0 features,BS4

Stunning Animated Product Banner

188 0 banner,BS4

Simple Contact Us Form

206 0 contact us,BS4

Modern Creative Portfolio Block

154 0 portfolio,BS4

Footer with a Button

144 0 footer,BS4

Hero Section with Search Form

116 0 BS5, Hero

Tired of Opening One Strap After Another?

Go to Pricing and start using AJAX Filter Options, no need to open multiple pages.

Get Started