Testimonial block with sliding testimonials for displaying client testimonials on websites and landing pages.

Dependencies

  • Bootstrap 4
  • FontAwesome
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Bootstrap Blocks - Testimonial 2</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="testimonial-2 pt-3 pb-5 pt-md-5">
        <div class="container">

            <div class="testimonial-intro text-center">
                <h1 class="testimonial-intro-title">Our Customers Say</h1>
                <p class="lead">Don't trust our words. Just have a look at what our customers say about <strong>FWR Blocks</strong></p>
            </div>

            <div class="testimonials my-4 my-md-5 pt-3">
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="10000">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <div class="testimonial text-center">
                                <div class="testimonial-profile rounded-circle mx-auto">
                                    <img src="//assets.free-website-resources.com/img/profile-06.jpg" alt="Jesse D." class="img-fluid">
                                </div>
                                <div class="testimonial-content">
                                    <h5 class="testimonial-user-name mt-4 mb-2">- Jesse D.</h5>
                                    <div class="testimonial-user-company text-muted">Director, Apple</div>
                                    <div class="testimonial-rating mt-2 mb-3">
                                        <div class="fas fa-star"></div>
                                        <div class="fas fa-star"></div>
                                        <div class="fas fa-star"></div>
                                        <div class="fas fa-star"></div>
                                        <div class="fas fa-star"></div>
                                    </div>
                                    <div class="testimonial-message p-3 py-md-4 px-md-5 mt-3 mt-md-4 mx-sm-auto">
                                        <p>It really saves me time and effort. FWR Bootstrap Blocks is exactly what our business has been lacking. FWR Bootstrap Blocks was worth a fortune to my company. FWR Bootstrap Blocks has really helped our business. I'm good to go.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="testimonial text-center">
                                <div class="testimonial-profile rounded-circle mx-auto">
                                    <img src="//assets.free-website-resources.com/img/profile-03.jpg" alt="Anabella M." class="img-fluid">
                                </div>
                                <div class="testimonial-content">
                                    <h5 class="testimonial-user-name mt-4 mb-2">- Anabella M.</h5>
                                    <div class="testimonial-user-company text-muted">Director, Microsoft</div>
                                    <div class="testimonial-rating mt-2 mb-3">
                                        <div class="fas fa-star"></div>
                                        <div class="fas fa-star"></div>
                                        <div class="fas fa-star"></div>
                                        <div class="fas fa-star"></div>
                                        <div class="fas fa-star"></div>
                                    </div>
                                    <div class="testimonial-message p-3 py-md-4 px-md-5 mt-3 mt-md-4 mx-sm-auto">
                                        <p>Needless to say we are extremely satisfied with the results. Keep up the excellent work. Your company is truly upstanding and is behind its product 100%. Thanks guys, keep up the good work!</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="testimonial text-center">
                                <div class="testimonial-profile rounded-circle mx-auto">
                                    <img src="//assets.free-website-resources.com/img/profile-02.jpg" alt="Candace H." class="img-fluid">
                                </div>
                                <div class="testimonial-content">
                                    <h5 class="testimonial-user-name mt-4 mb-2">- Candace H.</h5>
                                    <div class="testimonial-user-company text-muted">Director, Google</div>
                                    <div class="testimonial-rating mt-2 mb-3">
                                        <div class="fas fa-star"></div>
                                        <div class="fas fa-star"></div>
                                        <div class="fas fa-star"></div>
                                        <div class="fas fa-star"></div>
                                        <div class="fas fa-star"></div>
                                    </div>
                                    <div class="testimonial-message p-3 py-md-4 px-md-5 mt-3 mt-md-4 mx-sm-auto">
                                        <p>FWR Bootstrap Blocks is exactly what our business has been lacking. FWR Bootstrap Blocks is both attractive and highly adaptable. Man, this thing is getting better and better as I learn more about it.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <a class="carousel-control-prev d-none d-md-flex" href="#carouselExampleIndicators" 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 d-none d-md-flex" href="#carouselExampleIndicators" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>

        </div>
    </div>
    <!-- /.testimonial-2 -->

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
// Bootstrap variables and mixins
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// Variables
$primary:       #5863f8;
$rating:        #ffd500;
$border-radius: 10px;

$carousel-control-prev-icon-bg:  str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='https://www.w3.org/2000/svg' fill='#{$gray-300}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23");
$carousel-control-next-icon-bg:  str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='https://www.w3.org/2000/svg' fill='#{$gray-300}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23");

// Custom CSS
.testimonial-intro-title {
  font-size: 1.75rem;
}

.testimonial-profile {
  width: 80px;
  overflow: hidden;
}

.testimonial-content {
  margin-top: 1.5rem;
}

.testimonial-user-name {
  font-size: 1.5rem;
  font-weight: 500;
  margin-top: 0 !important;
}

.testimonial-user-company {
  font-size: .875rem;
}

.testimonial-rating {
  font-size: .75rem;
  color: $rating;
}

.testimonial-message {
  background: $gray-200;
  border-radius: $border-radius;

  p {
    color: $gray-700;
    line-height: 1.75;

    &::before,
    &::after {
      font-family: "Arial", serif;
      font-weight: bold;
    }

    &::before {
      content: '“';
      margin-right: 3px;
    }

    &::after {
      content: '”';
      margin-left: 3px;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.carousel-control-prev-icon {
  background-image: $carousel-control-prev-icon-bg;
}

.carousel-control-next-icon {
  background-image: $carousel-control-next-icon-bg;
}

.carousel-indicators {
  bottom: -50px;

  li {
    background-color: rgba($black, .1);
    height: 6px;
    border-radius: 3px;
    cursor: pointer;
    margin-left: .25rem;
    margin-right: .25rem;
  }

  .active {
    background-color: $primary;
  }
}


@include media-breakpoint-up(sm) {

  .testimonial-message {
    max-width: 700px;
  }

}


@include media-breakpoint-up(md) {

  .testimonial-intro-title {
    font-size: 2.5rem;
  }

  .testimonial-message {
    margin-left: 15% !important;
    margin-right: 15% !important;
    max-width: none;
  }

  .carousel-control-next,
  .carousel-control-prev {
    background-color: transparent;
  }

}


@include media-breakpoint-up(lg) {

  .testimonial-message {
    margin-left: 10% !important;
    margin-right: 10% !important;
  }

  .carousel-control-next,
  .carousel-control-prev {
    background-color: $white;
    width: 10%;
    opacity: 1 !important;
  }

}
@charset "UTF-8";
.testimonial-intro-title {
  font-size: 1.75rem;
}

.testimonial-profile {
  width: 80px;
  overflow: hidden;
}

.testimonial-content {
  margin-top: 1.5rem;
}

.testimonial-user-name {
  font-size: 1.5rem;
  font-weight: 500;
  margin-top: 0 !important;
}

.testimonial-user-company {
  font-size: .875rem;
}

.testimonial-rating {
  font-size: .75rem;
  color: #ffd500;
}

.testimonial-message {
  background: #e9ecef;
  border-radius: 10px;
}

.testimonial-message p {
  color: #495057;
  line-height: 1.75;
}

.testimonial-message p::before, .testimonial-message p::after {
  font-family: "Arial", serif;
  font-weight: bold;
}

.testimonial-message p::before {
  content: '\201C';
  margin-right: 3px;
}

.testimonial-message p::after {
  content: '\201D';
  margin-left: 3px;
}

.testimonial-message p:last-child {
  margin-bottom: 0;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='https://www.w3.org/2000/svg' fill='%23dee2e6' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='https://www.w3.org/2000/svg' fill='%23dee2e6' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

.carousel-indicators {
  bottom: -50px;
}

.carousel-indicators li {
  background-color: rgba(0, 0, 0, 0.1);
  height: 6px;
  border-radius: 3px;
  cursor: pointer;
  margin-left: .25rem;
  margin-right: .25rem;
}

.carousel-indicators .active {
  background-color: #5863f8;
}

@media (min-width: 576px) {
  .testimonial-message {
    max-width: 700px;
  }
}

@media (min-width: 768px) {
  .testimonial-intro-title {
    font-size: 2.5rem;
  }
  .testimonial-message {
    margin-left: 15% !important;
    margin-right: 15% !important;
    max-width: none;
  }
  .carousel-control-next,
  .carousel-control-prev {
    background-color: transparent;
  }
}

@media (min-width: 992px) {
  .testimonial-message {
    margin-left: 10% !important;
    margin-right: 10% !important;
  }
  .carousel-control-next,
  .carousel-control-prev {
    background-color: #fff;
    width: 10%;
    opacity: 1 !important;
  }
}

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvYm9vdHN0cmFwL3Rlc3RpbW9uaWFsL3Rlc3RpbW9uaWFsLTI=