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

Dependencies

  • Bootstrap 4
<!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 1</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">
    
    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="testimonial-1 py-3 py-md-5">

        <div class="container">
            <div class="row testimonials my-3">
                <div class="col-md-6 d-flex">
                    <div class="testimonial d-flex p-4">
                        <div class="testimonial-profile rounded-circle mr-3 mr-md-4">
                            <img src="//assets.free-website-resources.com/img/profile-01.jpg" alt="Jesse D." class="img-fluid">
                        </div>
                        <div class="testimonial-content">
                            <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 class="testimonial-user-name mt-4">- Jesse D.</div>
                            <div class="testimonial-user-company">Apple</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 d-flex mt-4 mt-md-0">
                    <div class="testimonial d-flex p-4">
                        <div class="testimonial-profile rounded-circle mr-3 mr-md-4">
                            <img src="//assets.free-website-resources.com/img/profile-03.jpg" alt="Annabell M." class="img-fluid">
                        </div>
                        <div class="testimonial-content">
                            <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 class="testimonial-user-name mt-4">- Annabell M.</div>
                            <div class="testimonial-user-company">Microsoft</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 d-flex mt-4">
                    <div class="testimonial d-flex p-4">
                        <div class="testimonial-profile rounded-circle mr-3 mr-md-4">
                            <img src="//assets.free-website-resources.com/img/profile-02.jpg" alt="Candace H." class="img-fluid">
                        </div>
                        <div class="testimonial-content">
                            <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 class="testimonial-user-name mt-4">- Candace H.</div>
                            <div class="testimonial-user-company">Google</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 d-flex mt-4">
                    <div class="testimonial d-flex p-4">
                        <div class="testimonial-profile rounded-circle mr-3 mr-md-4">
                            <img src="//assets.free-website-resources.com/img/profile-07.jpg" alt="Joe H." class="img-fluid">
                        </div>
                        <div class="testimonial-content">
                            <p>""This is simply unbelievable! I use FWR Bootstrap Blocks often. You've saved our business! No matter where you go, FWR Bootstrap Blocks is the coolest, most happening thing around!""</p>
                            <div class="testimonial-user-name mt-4">- Joe H.</div>
                            <div class="testimonial-user-company">Facebook</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

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

    <!-- 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;

// Custom CSS
.testimonial {
  border: 2px solid $border-color;
  border-radius: 1rem;
  cursor: default;
  transition: background-color .3s, border-color .3s;

  @include hover {
    background-color: rgba($primary, .1);
    border-color: rgba($primary, .5);
  }
}

.testimonial-profile {
  flex: 0 0 60px;
  height: 60px;
  overflow: hidden;
}

.testimonial-content {
  p {
    color: $gray-600;
  }
}

.testimonial-user-name {
  font-size: 1rem;
  font-weight: bold;
  color: $gray-900;
  text-transform: uppercase;
}

.testimonial-user-company {
  font-size: 1rem;
  color: $gray-600;
}


@include media-breakpoint-up(xl) {

  .testimonial-profile {
    flex-basis: 80px;
    height: 80px;
  }

}
.testimonial {
  border: 2px solid #dee2e6;
  border-radius: 1rem;
  cursor: default;
  -webkit-transition: background-color .3s, border-color .3s;
  transition: background-color .3s, border-color .3s;
}

.testimonial:hover {
  background-color: rgba(88, 99, 248, 0.1);
  border-color: rgba(88, 99, 248, 0.5);
}

.testimonial-profile {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 60px;
          flex: 0 0 60px;
  height: 60px;
  overflow: hidden;
}

.testimonial-content p {
  color: #6c757d;
}

.testimonial-user-name {
  font-size: 1rem;
  font-weight: bold;
  color: #212529;
  text-transform: uppercase;
}

.testimonial-user-company {
  font-size: 1rem;
  color: #6c757d;
}

@media (min-width: 1200px) {
  .testimonial-profile {
    -ms-flex-preferred-size: 80px;
        flex-basis: 80px;
    height: 80px;
  }
}

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvYm9vdHN0cmFwL3Rlc3RpbW9uaWFsL3Rlc3RpbW9uaWFsLTE=