Bootstrap testimonial snipp example v30

Bootstrap testimonial snipp example v30

bootstrap html snipp

Whole html/css code


<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<title>Testimonial snipp</title>
<style>
.card{
border-radius: 0.4rem;    
}
.blockquote-details .info {
    padding-left: 1rem;
}
.blockquote-details {
    display: flex;
    align-items: center;
    text-align: left;
}
.item-inner {
 padding: 1rem .75rem;
}
blockquote.icon {
    position: relative;
    border: 0;
    padding: 0;
}
blockquote.icon:before {
    content: "201d";
    position: absolute;
    top: -1.5rem;
    color: rgba(52,63,82,.05);
    font-size: 10rem;
    line-height: 1;
    z-index: 1;
}
.owl-carousel.gap-small .owl-dots {
    margin-top: 1rem;
}
.owl-carousel .owl-dots {
    text-align: center;
}
.owl-carousel .owl-dots .owl-dot.active span {
    transform: scale(1);
    background: 0 0;
    border-color: #fff;
}
.owl-carousel .owl-dots .owl-dot span {
 width: .7rem;
 height: .7rem;
 margin: 0 .3rem;
    background: #fff;
    opacity: .5;
    display: block;
    -webkit-backface-visibility: visible;
    transition: all .2s ease-in-out;
    border-radius: 100%;
    transform: scale(.6);
    border: 3px solid transparent;
}
.owl-carousel .owl-item img {
    display: inline-block;
}
.w-12 {
    width: 3.5rem!important;
}
.image-wrapper.bg-cover {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll!important;
}
.image-wrapper.bg-full {
    background-size: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll!important;
}

.image-wrapper:not(.mobile) {
    background-attachment: fixed!important;
}
.card[class*=bg-] {
    box-shadow: none!important;
}
.image-wrapper {
    background: no-repeat center center;
    background-size: cover;
    position: relative;
    z-index: 0;
}
.ratings {
    display: inline-block;
    position: relative;
    width: 5rem;
    height: 0.8rem;
}
.ratings:after {
    display: inline-block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-style: normal;
    font-weight: 400;
 font-size: .9rem;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
    color: #fcc032;
    content: "26052605260526052605";
    overflow: hidden;
}
</style>
</head>
<body>



  <div class="container py-5">
    <div class="row text-white text-center">
      <div class="col-xl-10 mx-auto mb-5">
        <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400" style="background-image:url(https://images.pexels.com/photos/2371901/pexels-photo-2371901.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)">
          <div class="card-body p-5">
            <div class="row">
              <div class="col-xxl-9 mx-auto">
                <div class="owl-carousel dots-dark gap-small mb-0" data-margin="30">
                  <div class="item">
                    <span class="ratings five mb-3"></span>
                    <blockquote class="border-0 fs-lg mb-2">
                      <p class="lead mb-4">“Vivamus sagittis lacus augue laoreet rutrum faucibus auctor vestibulum ligula porta felis, euismod semper cras justo odio consectetur.”</p>
                      <div class="blockquote-details justify-content-center text-center">
                        <div class="info ps-0">
                          <h5 class="mb-1 text-white">Coriss Ambady</h5>
                          <p class="mb-0">Financial Analyst</p>
                        </div>
                      </div>
                    </blockquote>
                  </div>
                  <!-- /.item -->
                  <div class="item">
                    <span class="ratings five mb-3"></span>
                    <blockquote class="border-0 fs-lg mb-2">
                      <p class="lead mb-4">“Vivamus sagittis lacus augue laoreet rutrum faucibus auctor vestibulum ligula porta felis, euismod semper cras justo odio consectetur.”</p>
                      <div class="blockquote-details justify-content-center text-center">
                        <div class="info ps-0">
                          <h5 class="mb-1 text-white">Cory Zamora</h5>
                          <p class="mb-0">Marketing Specialist</p>
                        </div>
                      </div>
                    </blockquote>
                  </div>
                  <!-- /.item -->
                  <div class="item">
                    <span class="ratings five mb-3"></span>
                    <blockquote class="border-0 fs-lg mb-2">
                      <p class="lead mb-4">“Vivamus sagittis lacus augue laoreet rutrum faucibus auctor vestibulum ligula porta felis, euismod semper cras justo odio consectetur.”</p>
                      <div class="blockquote-details justify-content-center text-center">
                        <div class="info ps-0">
                          <h5 class="mb-1 text-white">Nikolas Brooten</h5>
                          <p class="mb-0">Sales Manager</p>
                        </div>
                      </div>
                    </blockquote>
                  </div>
                  <!-- /.item -->
                </div>
                <!-- /.owl-carousel -->
              </div>
              <!-- /column -->
            </div>
            <!-- /.row -->
          </div>
          <!--/.card-body -->
        </div>
        <!--/.card -->
      </div>
      <!-- /column -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container -->




<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" ></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script> 
<script>
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:20,
    nav:false,
    dots:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
})
</script>
</body>
</html>

jsfiddle example

Spread the love

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top