Testimonial bootstrap snippets free download

Testimonial bootstrap snippets free download is a bootstrap snipp, which you can use as a testimonial slider in your web page.

Whole html/css code



<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Happy Client Testimonial</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
body {
    background: #FC5C7D;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #6A82FB, #FC5C7D);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #6A82FB, #FC5C7D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.5px;
    color: #666;
    line-height: 26px;
}
#carousel3d .carousel-3d-slide {
    text-align: center;
    background-color: #fff;
    padding: 10px;
    transition: all .4s ease;
    border-radius: 4px;
    border: 0;
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.2) !important;
}
#carousel3d .carousel-3d-slide.current {
    border-radius: 6px;
}
.img-circle {
    max-width: 100px;
    margin: 10px 0px 20px 0px;
    border-radius: 50%;
}
.prev[data-v-d8f7eea2] {
    color: #fff!important;
    left: 15% !important;
}
.next[data-v-d8f7eea2] {
    color: #fff!important;
    right: 15% !important;
}
.carousel-3d-container[data-v-4ca3afac] {
    overflow: unset!important;
}
@media (max-width: 1200px) {
.prev[data-v-d8f7eea2] {
    left: 0 !important;
    color: #ccc!important;
}
.next[data-v-d8f7eea2] {
    right: 0 !important;
    color: #ccc!important;
}
}
</style>
</head>
<body>
<div class="container-fluid text-center">
  <div class="row">
    <div class="col-12">
      <h3 class="text-white text-center py-5">Satisfied Clients</h3>
      <div id="carousel3d">
        <carousel-3d :perspective="0" :space="200" :display="5" :controls-visible="true" :controls-prev-html="'❬'" :controls-next-html="'❭'" :controls-width="30" :controls-height="60" :clickable="true" :autoplay="true" :autoplay-timeout="5000" :height="400">
          <slide :index="0">
            <div class="item"> <img class="img-circle" src="https://annedece.sirv.com/Images/pexels-andrea-piacquadio-762020%20(1).jpg" alt="">
              <h5 class="mb-1 text-success">John Deo</h5>
              <p class="mb-3 text-muted small">CEO &amp; Founder</p>
              <p class="mb-0">Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally            cultivate.</p>
            </div>
          </slide>
          <slide :index="1">
            <div class="item"> <img class="img-circle" src="https://annedece.sirv.com/Images/pexels-tim-savage-736716.jpg" alt="">
              <h5 class="mb-1 text-success">John Deo</h5>
              <p class="mb-3 text-muted small">CEO &amp; Founder</p>
              <p class="mb-0">Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally            cultivate.</p>
            </div>
          </slide>
          <slide :index="2">
            <div class="item"> <img class="img-circle" src="https://annedece.sirv.com/Images/pexels-stefan-stefancik-91227.jpg" alt="">
              <h5 class="mb-1 text-success">John Deo</h5>
              <p class="mb-4 text-muted small">CEO &amp; Founder</p>
              <p class="mb-0">Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally            cultivate.</p>
            </div>
          </slide>
          <slide :index="3">
            <div class="item"> <img class="img-circle" src="https://annedece.sirv.com/Images/pexels-tim-savage-736716.jpg" alt="">
              <h5 class="mb-1 text-success">John Deo</h5>
              <p class="mb-3 text-muted small">CEO &amp; Founder</p>
              <p class="mb-0">Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally            cultivate.</p>
            </div>
          </slide>
          <slide :index="4">
            <div class="item"> <img class="img-circle" src="https://annedece.sirv.com/Images/pexels-andrea-piacquadio-762020%20(1).jpg" alt="">
              <h5 class="mb-1 text-success">John Deo</h5>
              <p class="mb-3 text-muted small">CEO &amp; Founder</p>
              <p class="mb-0">Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally            cultivate.</p>
            </div>
          </slide>
          <slide :index="5">
            <div class="item"> <img class="img-circle" src="https://annedece.sirv.com/Images/pexels-tim-savage-736716.jpg" alt="">
              <h5 class="mb-1 text-success">John Deo</h5>
              <p class="mb-3 text-muted small">CEO &amp; Founder</p>
              <p class="mb-0">Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally            cultivate.</p>
            </div>
          </slide>
          <slide :index="6">
            <div class="item"> <img class="img-circle" src="https://annedece.sirv.com/Images/pexels-andrea-piacquadio-762020%20(1).jpg" alt="">
              <h5 class="mb-1 text-success">John Deo</h5>
              <p class="mb-3 text-muted small">CEO &amp; Founder</p>
              <p class="mb-0">Dramatically maintain clicks-and-mortar solutions without functional solutions. Completely synergize resource taxing relationships via premier niche markets. Professionally            cultivate.</p>
            </div>
          </slide>
        </carousel-3d>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.7/vue.js'></script> 
<script src='https://rawgit.com/Wlada/vue-carousel-3d/master/dist/vue-carousel-3d.min.js'></script> 
<script >new Vue({
        el: '#carousel3d',
        data: {
            slides: 7
        },
        components: {
            'carousel-3d': Carousel3d.Carousel3d,
            'slide': Carousel3d.Slide
        }
    })
</script>
</body>
</html>

jsfiddle example

Spread the love

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

Back To Top