Mon - Sun 8.00 AM - 8.00 PM
[email protected]
Home
Articles
Our Courses
HTML 5
CSS
JavaScript
MySql
PHP
Laravel
Bootstrap
Our Tutorials
PHP
JavaScript
HTML
Laravel
MySQL
JQuery
CSS
Git
Bootstrap
Vue JS
Android
Ui Code Snippets
Chat Box
Range Slider
Radio Button
Select Box
Nav Bar
Other
Testimonial
Carousel
Logo
Loader
Lightbox
Login Form
Modals
OTP Verification Form
Popular Notes
HTML
CSS
JavaScript
SQL
Services
About
Contact Us
Ui Code
Snippets
Bootstrap 3 testimonial
HTML
CSS
JS
Output
HTML
<!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"> <!-- CSS files --> <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"> <!-- javascript Files --> <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> <!-- Testimonial start --> <section class="testimonial text-center"> <div class="container"> <div class="tstmnl-heading white-tstmnl-heading"> Bootstrap 3 Testimonial </div> <!-- Wrapper for slides --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <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> <!-- Controls --> <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> <!-- Testimonial end --> </body> </html>
CSS
.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; }
JS
Output