Bootstrap testimonial snipp example v29

Bootstrap testimonial snipp example v29

bootstrap five 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;    
}
.shape.rellax {
    z-index: 1;
}
.shape.rellax {
    position: absolute;
}
.position-relative .shape.rellax+figure {
    position: relative;
    z-index: 2;
}
.h-21 {
    height: 12.5rem!important;
}
.w-21 {
    width: 12.5rem!important;
}
figure img {
    width: 100%;
    max-width: 100%;
    height: auto!important;
}
.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: #aab0bc;
}
.owl-carousel .owl-dots .owl-dot span {
 width: .7rem;
 height: .7rem;
 margin: 0 .3rem;
    background: #aab0bc;
    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;
}
blockquote.icon-top {
    padding-top: 3.75rem;
    position: relative;
}
</style>
</head>
<body>


  <div class="container py-5">
    <div class="position-relative">
      <div class="shape rounded-circle bg-line primary rellax w-18 h-18" data-rellax-speed="1" style="top: -2rem; right: -2.7rem; z-index:0;"></div>
      <div class="shape rounded-circle bg-soft-primary rellax w-18 h-18" data-rellax-speed="1" style="bottom: -1rem; left: -3rem; z-index:0;"></div>
      <div class="card shadow-lg">
        <div class="row gx-0">
         <div class="col-lg-6 image-wrapper bg-image bg-cover rounded-top rounded-lg-start" style="background-image: url(https://bootstraplily.com/wp-content/uploads/2021/10/pexels-fauxels-3182781.jpg);">
              </div>
          <!--/column -->
          <div class="col-lg-6">
            <div class="p-5 m-5">
              <div class="basic-slider owl-carousel gap-small" data-margin="30">
                <div class="item">
                  <blockquote class="icon icon-top fs-lg text-center">
                    <p class="lead mb-4">“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio.”</p>
                    <div class="blockquote-details justify-content-center text-center">
                      <div class="info ps-0">
                        <h5 class="mb-1">Coriss Ambady</h5>
                        <p class="mb-0">Financial Analyst</p>
                      </div>
                    </div>
                  </blockquote>
                </div>
                <!-- /.item -->
                <div class="item">
                  <blockquote class="icon icon-top fs-lg text-center">
                    <p class="lead mb-4">“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio.”</p>
                    <div class="blockquote-details justify-content-center text-center">
                      <div class="info ps-0">
                        <h5 class="mb-1">Cory Zamora</h5>
                        <p class="mb-0">Marketing Specialist</p>
                      </div>
                    </div>
                  </blockquote>
                </div>
                <!-- /.item -->
                <div class="item">
                  <blockquote class="icon icon-top fs-lg text-center">
                    <p class="lead mb-4">“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio.”</p>
                    <div class="blockquote-details justify-content-center text-center">
                      <div class="info ps-0">
                        <h5 class="mb-1">Nikolas Brooten</h5>
                        <p class="mb-0">Sales Manager</p>
                      </div>
                    </div>
                  </blockquote>
                </div>
                <!-- /.item -->
              </div>
              <!-- /.owl-carousel -->
            </div>
            <!--/div -->
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!-- /.card -->
    </div>
    <!-- /div -->
  </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