Bootstrap 3 testimonial

HTML

CSS

Output

HTML Copied

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <title>Bootstrap 3 testimonial</title>
</head>

<body>
    
    <section class="testimonial text-center">
        <div class="container">
            <div class="tstmnl-heading white-tstmnl-heading">
                Bootstrap 3 Testimonial
            </div>
            
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <div class="testimonial4_slide">
                            <img src="https://www.teknowize.com/attachments/file_1660158153.jpg" class="img-circle img-responsive" />
                            <p class="career-carausil-name">Anna zukini</p>
                            <p class="career-carausil-post">Business Executive</p>
                            <p class="career-carausil-msg">Lorem Ipsum is simply dummy text of the printing and
                                typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
                                the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                                specimen book. </p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="testimonial4_slide">
                            <img src="https://www.teknowize.com/attachments/file_1660158153.jpg" class="img-circle img-responsive" />
                            <p class="career-carausil-name">Rohit Kumar</p>
                            <p class="career-carausil-post">Full Web Developer</p>
                            <p class="career-carausil-msg">Lorem Ipsum is simply dummy text of the printing and
                                typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
                                the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                                specimen book. </p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="testimonial4_slide">
                            <img src="https://www.teknowize.com/attachments/file_1660158153.jpg" class="img-circle img-responsive" />
                            <p class="career-carausil-name">Human</p>
                            <p class="career-carausil-post">Human Resource</p>
                            <p class="career-carausil-msg">Lorem Ipsum is simply dummy text of the printing and
                                typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
                                the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                                specimen book. </p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="testimonial4_slide">
                            <img src="https://www.teknowize.com/attachments/file_1660158153.jpg" class="img-circle img-responsive" />
                            <p class="career-carausil-name">Rohit Kumar</p>
                            <p class="career-carausil-post">Full Web Developer</p>
                            <p class="career-carausil-msg">Lorem Ipsum is simply dummy text of the printing and
                                typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
                                the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                                specimen book. </p>
                        </div>
                    </div>
                    <div class="item">
                        <div class="testimonial4_slide">
                            <img src="https://www.teknowize.com/attachments/file_1660158153.jpg" class="img-circle img-responsive" />
                            <p class="career-carausil-name">Rohit Kumar</p>
                            <p class="career-carausil-post">Full Stack Web Developer</p>
                            <p class="career-carausil-msg">Lorem Ipsum is simply dummy text of the printing and
                                typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since
                                the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                                specimen book. </p>
                        </div>
                    </div>
                </div>
            </div>
            	
			<a class="left carousel-control" style="margin: 0;padding:0"  href="#carousel-example-generic" data-slide="prev">
				<span style="width:100%"><img src="https://www.teknowize.com/attachments/file_1660158608.png" class="career-carausel-img-lft" alt=""></span>
			</a>
			<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
				<span><img src="https://www.teknowize.com/attachments/file_1660158637.png" class="career-carausel-img-right" alt=""></span>
			</a>
        </div>        
    </section>
    
</body>

</html>

CSS Copied

.tstmnl-heading {
    text-align: center;
    color: #454343;
    font-size: 30px;
    font-weight: 700;
    position: relative;
    margin-bottom: 70px;
    text-transform: uppercase;
    z-index: 999;
}
.white-tstmnl-heading {
    color: #ffffff;
}
.tstmnl-heading:after {
    content: ' ';
    position: absolute;
    top: 100%;
    left: 50%;
    height: 40px;
    width: 180px;
    border-radius: 4px;
    transform: translateX(-50%);
    background: url(img/heading-line.png);
    background-repeat: no-repeat;
    background-position: center;
}
.white-tstmnl-heading:after {
    background: url('https://www.teknowize.com/attachments/file_1660158037.png');
    background-repeat: no-repeat;
    background-position: center;
}
.tstmnl-heading span {
    font-size: 18px;
    display: block;
    font-weight: 500;
}
.white-tstmnl-heading span {
    color: #ffffff;
}
.testimonial {
    position: relative;
    background: url('https://www.teknowize.com/attachments/file_1660158447.jpg');
    padding-top: 50px;
    background-position: center;
    background-size: cover;
}
#testimonial4 .carousel-inner .item {
    overflow: hidden;
}
.testimonial4_header {
    top: 0;
    left: 0;
    bottom: 0;
    width: 550px;
    display: block;
    margin: 30px auto;
    text-align: center;
    position: relative;
}
.testimonial4_header h4 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 600;
    position: relative;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.testimonial4_slide {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 90%;
    margin: auto;
    position: relative;
    text-align: center;
}
.testimonial4_slide img {
    top: 0;
    left: 0;
    right: 0;
    width: 136px;
    height: 136px;
    margin: auto;
    margin-bottom: 0;
    display: block;
    color: #f2f2f2;
    font-size: 18px;
    line-height: 46px;
    text-align: center;
    position: relative;
    border-radius: 50%;
    box-shadow: -6px 6px 6px rgba(0, 0, 0, 0.23);
    -moz-box-shadow: -6px 6px 6px rgba(0, 0, 0, 0.23);
    -o-box-shadow: -6px 6px 6px rgba(0, 0, 0, 0.23);
    -webkit-box-shadow: -6px 6px 6px rgba(0, 0, 0, 0.23);
}
.testimonial4_slide h4 {
    color: #ffffff;
    font-size: 22px;
}
.testimonial .carousel {
    padding-bottom: 35px;
}
.testimonial .carousel-control-next-icon,
.testimonial .carousel-control-prev-icon {
    width: 35px;
    height: 35px;
}
.career-carausil-name {
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 1rem !important;
    font-size: 24px !important;
    ;
    font-weight: 600 !important;
    ;
    color: white !important;
    ;
}
.career-carausil-post {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 24px !important;
    ;
    font-weight: 600 !important;
    ;
    color: #FBF100 !important;
}
.career-carausil-msg {
    font-size: 20px !important;
    ;
    font-weight: 400 !important;
    ;
    color: white !important;
    margin-top: 2rem !important;
}
.career-carausel-img-lft {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 1rem
}
.career-carausel-img-right {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    right: 1rem;
}

Bootstrap 3 testimonial

JS Copied

Output