Bootstrap Testimonial Design - Bootstrap Tutorials

Testimonials are the key feature of any website specially customer feedback is necessary from customers. Testimonials increase the popularity of your business. Bootstrap framework provides lots of in built features & classes regarding slideshows. Below is the stunning testimonial wrapper which allows you to add great effect in your Template.

This is only the single bootstrap wrapper but you can add multiple in slides and enjoy stunning effect with wonderful visual design of bootstrap testimonial slider.
https://www.propatel.com/2019/05/bootstrap-testimonial-slider-design.html

HTML for the Bootstrap Testimonial 

<div class="container content">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="testimonials">
                <div class="active item">
                  <blockquote><p>Denim you probably haven't heard of. ُPropatel.com is an awesome website collect lots of eductional stuff with examples and nice content. Do visit them every day.Hope you will like this blog and appreciate it. </p></blockquote>
                  <div class="carousel-info">
                    <img alt="" src="https://lh3.googleusercontent.com/a-/AAuE7mD6z5q-0cU5Fy2IqkmRY12buzSXcGon5RI1aiopOQ=s200" class="pull-left">
                    <div class="pull-left">
                      <span class="testimonials-name">Lina Mars</span>
                      <span class="testimonials-post">Commercial Director</span>
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>

Here is the CSS for Testimonial Wrapper

/*** Testimonial Wrapper Shared by propatel.com ***/

/* Content */
.content {
    padding-top: 30px;
}

/* Testimonials */
.testimonials blockquote {
    background: #f8f8f8 none repeat scroll 0 0;
    border: medium none;
    color: #666;
    display: block;
    font-size: 14px;
    line-height: 20px;
    padding: 15px;
    position: relative;
}
.testimonials blockquote::before {
    width: 0; 
    height: 0;
    right: 0;
    bottom: 0;
    content: " "; 
    display: block; 
    position: absolute;
    border-bottom: 20px solid #fff;    
    border-right: 0 solid transparent;
    border-left: 15px solid transparent;
    border-left-style: inset; /*FF fixes*/
    border-bottom-style: inset; /*FF fixes*/
}
.testimonials blockquote::after {
    width: 0;
    height: 0;
    right: 0;
    bottom: 0;
    content: " ";
    display: block;
    position: absolute;
    border-style: solid;
    border-width: 20px 20px 0 0;
    border-color: #e63f0c transparent transparent transparent;
}
.testimonials .carousel-info img {
    border: 1px solid #f5f5f5;
    border-radius: 150px !important;
    height: 75px;
    padding: 3px;
    width: 75px;
}
.testimonials .carousel-info {
    overflow: hidden;
}
.testimonials .carousel-info img {
    margin-right: 15px;
}
.testimonials .carousel-info span {
    display: block;
}
.testimonials span.testimonials-name {
    color: #e6400c;
    font-size: 16px;
    font-weight: 300;
    margin: 23px 0 7px;
}
.testimonials span.testimonials-post {
    color: #656565;
    font-size: 12px;
}

This will give you awesome design for testimonial wrapper.

Post a Comment

0 Comments