This is bootstrap 4 carousel testimonials slider. also this slider call people or user review slider. also you can use for display celebrity message. this is fully responsive author thought slider. in this slider we are display image,name or title,status ot tagline and description. also you can use in display logo slider.

We allows to free snippets of bootstrap testimonial slider example , you can download full code of bootstrap testimonial slider free download layout. Here in this post i will give you example of bootstrap testimonial box snippet and you will get simple code of html, css and jquery. In bootstrap carousel slider with people review snippet i give you three tab with html, css and js, you can easily get code of bootstrap testimonial box layout.


<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="custom.css"> </head> <body class="bg-info"> <div class="container"> <div class="row"> <div class="col-md-8 offset-md-2 col-10 offset-1 mt-5"> <h2 class="text-center mt-5 mb-5 pb-2 text-uppercase text-dark"><strong>Testimonials</strong></h2> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <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 mt-4"> <div class="carousel-item text-center active"> <div class="img-box p-1 border rounded-circle m-auto"> <img class="d-block w-100 rounded-circle" src="http://nicesnippets.com/demo/profile-1.jpg" alt="First slide"> </div> <h5 class="mt-4 mb-0"><strong class="text-warning text-uppercase">Paul Mitchel</strong></h5> <h6 class="text-dark m-0">Web Developer</h6> <p class="m-0 pt-3 text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Idac bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet.</p> </div> <div class="carousel-item text-center"> <div class="img-box p-1 border rounded-circle m-auto"> <img class="d-block w-100 rounded-circle" src="http://nicesnippets.com/demo/profile-3.jpg" alt="First slide"> </div> <h5 class="mt-4 mb-0"><strong class="text-warning text-uppercase">Steve Fonsi</strong></h5> <h6 class="text-dark m-0">Web Designer</h6> <p class="m-0 pt-3 text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Idac bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet.</p> </div> <div class="carousel-item text-center"> <div class="img-box p-1 border rounded-circle m-auto"> <img class="d-block w-100 rounded-circle" src="http://nicesnippets.com/demo/profile-7.jpg" alt="First slide"> </div> <h5 class="mt-4 mb-0"><strong class="text-warning text-uppercase">Daniel vebar</strong></h5> <h6 class="text-dark m-0">Seo Analyst</h6> <p class="m-0 pt-3 text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Idac bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet.</p> </div> </div> <a class="carousel-control-prev" 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" 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> </body> </html>
body{ font-family: 'Lato', sans-serif; } h2{ position: relative; } h2::after{ content: ""; width: 130px; position: absolute; margin: 0 auto; height: 3px; background: #FFC107; left: 0; right: 0; bottom: -10px; } .carousel-inner .carousel-item .img-box{ width: 135px; height: 135px; } .carousel-control-prev{ left: -100px; } .carousel-control-next{ right: -100px; } .carousel-indicators{ top: 320px; } @media (min-width: 320px) and (max-width: 640px) { .carousel-inner .carousel-item p{ font-size: 14px; } .carousel-control-prev{ left: -40px; } .carousel-control-next{ right: -40px; } .carousel-indicators{ top: 400px; } }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Related Post

Best product display slider using bootstrap

Best product display slider using bootstrap

In this slider you can put your product with add to cart button. with the auto s...

Read More
Bootstrap carousel slider with thumbnail image gallery

Bootstrap carousel slider with thumbnail image gallery

We create this slider usign bootstrap carousel. in this slider you can also see...

Read More
Bootstrap 4 user profile design usign with html and css

Bootstrap 4 user profile design usign with html and css

We provide bootstrap 4 user profile design. we provide new design of profile. bo...

Read More

Random Post