{"id":3102,"date":"2018-12-16T17:19:49","date_gmt":"2018-12-16T11:49:49","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=3102"},"modified":"2026-10-05T17:28:38","modified_gmt":"2026-10-05T11:58:38","slug":"testimonial-using-bootstrap","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/testimonial-using-bootstrap\/","title":{"rendered":"How to Create a Testimonial Carousel Using Bootstrap."},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Post Date:<\/strong> December 16, 2018<br><strong>Last Updated:<\/strong> October 05, 2026<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is a testimonial?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Testimonials are written or recorded statements that support your credibility and demonstrate your level of expertise. They also strengthen your reputation by expressing the trust that customers have in you and your business offerings.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Testimonials are a valuable tool for attracting the attention of prospective clients and existing customers. They can help build confidence in your services and ultimately contribute to the success of your business. Pasted text<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2018\/12\/image-2.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"785\" height=\"415\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2018\/12\/image-2.png\" alt=\"\" class=\"wp-image-12103\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2018\/12\/image-2.png 785w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2018\/12\/image-2-300x159.png 300w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2018\/12\/image-2-768x406.png 768w\" sizes=\"(max-width: 785px) 100vw, 785px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Testimonial Section Using Bootstrap and CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A testimonial section can be designed using <strong>HTML, CSS, and Bootstrap<\/strong>. Bootstrap provides useful components that make it easier to create responsive and interactive website sections.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When working with Bootstrap, it is important to make sure that the Bootstrap classes used in your code match the version of Bootstrap imported into your project. For example, using Bootstrap 4 classes while importing Bootstrap 3 can result in unexpected behavior or styling issues. Pasted text<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The code in this example is developed using <strong>Bootstrap 3<\/strong> and includes star ratings for customer reviews. You can replace the sample reviews and customer names with your company&#8217;s <strong>truthful customer feedback and names<\/strong>. Pasted text<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The carousel technique is used to create an automatic slideshow, while CSS is used to style the testimonial section and sliding indicators. A background image is also added to make the testimonial section more visually appealing. Pasted text<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We have created the following sample code for the testimonial section. You can copy the code and modify it according to your application&#8217;s requirements. Pasted text<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML and CSS Code<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;html>\n&lt;head>\n&lt;meta charset=\"utf-8\">\n&lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n&lt;title>Bootstrap Testimonial Carousel with Quote Icon&lt;\/title>\n\n&lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Open+Sans:300,400,700\" rel=\"stylesheet\">\n\n&lt;link rel=\"stylesheet\"\nhref=\"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css\">\n\n&lt;link rel=\"stylesheet\"\nhref=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\">\n\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.12.4\/jquery.min.js\">&lt;\/script>\n\n&lt;script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\">&lt;\/script>\n\n&lt;style type=\"text\/css\">\n\n.background-image {\n  background-image:\n  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),\n  url(\"testimonials2.JPEG\");\n\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  position: relative;\n  padding:25px;\n  margin:0px;\n  margin-bottom:60px;\n}\n\n.star {\n    color:orange;\n}\n\n.carousel {\n    margin: 2px auto;\n    padding: 0 0px;\n}\n\n.carousel .item {\n    color: white;\n    overflow: hidden;\n    min-height: 120px;\n    font-size: 14px;\n}\n\n.carousel .testimonial {\n    padding: 0 0px 0 0px;\n    position: relative;\n}\n\n.carousel .overview b {\n    text-transform: uppercase;\n    color:Deepskyblue;\n}\n\n.carousel .carousel-indicators {\n    bottom: -25px;\n}\n\n.carousel-indicators li,\n.carousel-indicators li.active {\n    width: 14px;\n    height: 14px;\n    border-radius: 50%;\n    margin: 1px 3px;\n}\n\n.carousel-indicators li {\n    background: #e2e2e2;\n    border: 4px solid #fff;\n}\n\n.carousel-indicators li.active {\n    color: #fff;\n    background:Deepskyblue;\n    border: 5px double;\n}\n\n&lt;\/style>\n&lt;\/head>\n\n&lt;body>\n\n&lt;div class=\"background-image\">\n\n    &lt;div class=\"container\">\n\n        &lt;div class=\"row\">\n\n            &lt;div class=\"col-sm-12\">\n\n                &lt;h4>\n                    &lt;i>\n                        &lt;span style=\"color:white\">\n                            What our clients are saying about us !\n                        &lt;\/span>\n                    &lt;\/i>\n                &lt;\/h4>\n\n                &lt;div id=\"myCarousel\"\n                     class=\"carousel slide\"\n                     data-ride=\"carousel\">\n\n                    &lt;!-- Carousel indicators -->\n\n                    &lt;ol class=\"carousel-indicators\">\n\n                        &lt;li data-target=\"#myCarousel\"\n                            data-slide-to=\"0\"\n                            class=\"active\">&lt;\/li>\n\n                        &lt;li data-target=\"#myCarousel\"\n                            data-slide-to=\"1\">&lt;\/li>\n\n                        &lt;li data-target=\"#myCarousel\"\n                            data-slide-to=\"2\">&lt;\/li>\n\n                    &lt;\/ol>\n\n                    &lt;div class=\"carousel-inner\">\n\n                        &lt;div class=\"item carousel-item active\">\n\n                            &lt;div class=\"row\">\n\n                                &lt;div class=\"col-sm-6\">\n\n                                    &lt;div class=\"media\">\n\n                                        &lt;div class=\"media-body\">\n\n                                            &lt;div class=\"testimonial\">\n\n                                                &lt;!-- Font Awesome Icon Library -->\n\n                                                &lt;link rel=\"stylesheet\"\n                                                href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\">\n\n                                                &lt;span class=\"fa fa-star star\">&lt;\/span>\n                                                &lt;span class=\"fa fa-star star\">&lt;\/span>\n                                                &lt;span class=\"fa fa-star star\">&lt;\/span>\n                                                &lt;span class=\"fa fa-star star\">&lt;\/span>\n                                                &lt;span class=\"fa fa-star star\">&lt;\/span>\n\n                                                &lt;p>\n                                                    Good customer service and a lot of patience towards their customers.\n                                                    5 stars all the way. Thank you.\n                                                &lt;\/p>\n\n                                                &lt;p class=\"overview\">\n                                                    &lt;b>xyz&lt;\/b>\n                                                &lt;\/p>\n\n                                            &lt;\/div>\n\n                                        &lt;\/div>\n\n                                    &lt;\/div>\n\n                                &lt;\/div>\n\n                                &lt;div class=\"col-sm-6\">\n\n                                    &lt;div class=\"media\">\n\n                                        &lt;div class=\"media-body\">\n\n                                            &lt;div class=\"testimonial\">\n\n                                                &lt;!-- Font Awesome Icon Library -->\n\n                                                &lt;link rel=\"stylesheet\"\n                                                href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css\">\n\n                                                &lt;span class=\"fa fa-star star\">&lt;\/span>\n                                                &lt;span class=\"fa fa-star star\">&lt;\/span>\n                                                &lt;span class=\"fa fa-star star\">&lt;\/span>\n                                                &lt;span class=\"fa fa-star star\">&lt;\/span>\n                                                &lt;span class=\"fa fa-star\">&lt;\/span>\n\n                                                &lt;p>\n                                                    Fixed within an hour, cracking work and price thank you.\n                                                    Saved me time and money\n                                                &lt;\/p>\n\n                                                &lt;p class=\"overview\">\n                                                    &lt;b>xyz1&lt;\/b>\n                                                &lt;\/p>\n\n                                            &lt;\/div>\n\n                                        &lt;\/div>\n\n                                    &lt;\/div>\n\n                                &lt;\/div>\n\n                            &lt;\/div>\n\n                        &lt;\/div>\n\n                        &lt;!-- Additional testimonial slides can be added here -->\n\n                    &lt;\/div>\n\n                &lt;\/div>\n\n            &lt;\/div>\n\n        &lt;\/div>\n\n    &lt;\/div>\n\n&lt;\/div>\n\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The original article contains additional testimonial slides following the same structure, including customer reviews, names, star ratings, carousel indicators, and Bootstrap columns. Keep those existing sections as they are in your current article rather than replacing them. Pasted text<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How the Testimonial Carousel Works<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The testimonial section uses several Bootstrap and CSS features:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Bootstrap container:<\/strong> Keeps the testimonial content organized within a responsive layout.<\/li>\n\n\n\n<li><strong>Bootstrap carousel:<\/strong> Displays multiple testimonials as slides.<\/li>\n\n\n\n<li><strong>Carousel indicators:<\/strong> Allow visitors to identify and navigate between slides.<\/li>\n\n\n\n<li><strong>Star ratings:<\/strong> Font Awesome icons are used to display customer ratings.<\/li>\n\n\n\n<li><strong>Background image:<\/strong> The testimonial section uses a background image with a dark overlay.<\/li>\n\n\n\n<li><strong>CSS styling:<\/strong> Custom CSS controls the spacing, colors, indicators, typography, and overall appearance.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The original implementation uses Bootstrap 3.3.7, jQuery, Font Awesome, and Google Fonts. Pasted text<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Important Bootstrap Version Note<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This example was originally developed using <strong>Bootstrap 3<\/strong>. Make sure you use the same Bootstrap version as the classes and JavaScript used in the code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you are maintaining an existing Bootstrap 3 application, this implementation can be retained. For a new project, consider using a currently supported Bootstrap version and update the syntax accordingly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Result<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The result is a colorful testimonial section that can attract visitors&#8217; attention and provide a visually engaging way to display customer feedback. Pasted text<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can customize the background image, customer reviews, names, star ratings, colors, and carousel settings according to your application&#8217;s requirements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the above example, the effective usage of <strong>Bootstrap, carousel techniques, CSS, and HTML<\/strong> is explained clearly. You can modify the script according to your application and make use of it. Pasted text<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2018\/12\/image-3.png\"><img decoding=\"async\" width=\"766\" height=\"137\" src=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2018\/12\/image-3.png\" alt=\"\" class=\"wp-image-12104\" srcset=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2018\/12\/image-3.png 766w, https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2018\/12\/image-3-300x54.png 300w\" sizes=\"(max-width: 766px) 100vw, 766px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Official Bootstrap Documentation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For additional information about Bootstrap&#8217;s carousel component, refer to the official Bootstrap documentation:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/getbootstrap.com\/docs\/3.4\/javascript\/?utm_source=chatgpt.com#carousel\" target=\"_blank\" rel=\"noopener\">Bootstrap Carousel Documentation<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Using Bootstrap, CSS, and HTML, you can create an attractive testimonial section with a carousel, customer reviews, star ratings, and a background image.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The example above can be customized according to your website design and application requirements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">FAQs<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">1. What is a Bootstrap testimonial carousel?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">A Bootstrap testimonial carousel is a slideshow component used to display multiple customer testimonials within a website section.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2. Can I customize the testimonial design?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. You can customize the background image, colors, fonts, spacing, star ratings, and other CSS properties according to your website design.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">3. Can I add more customer testimonials?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Yes. You can add additional carousel items using the same HTML structure used in the existing testimonial slides.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Related Articles<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-pheonix-solutions wp-block-embed-pheonix-solutions\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"aehQAEVAK1\"><a href=\"https:\/\/pheonixsolutions.com\/blog\/select2-search-input-not-working-bootstrap-modal\/\">How to Fix Select2 Search Not Working in Bootstrap Modal<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"\u201cHow to Fix Select2 Search Not Working in Bootstrap Modal\u201d \u2014 Pheonix Solutions\" src=\"https:\/\/pheonixsolutions.com\/blog\/select2-search-input-not-working-bootstrap-modal\/embed\/#?secret=Xo5eTBvVZx#?secret=aehQAEVAK1\" data-secret=\"aehQAEVAK1\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Talk to Our Experts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Need help creating responsive web interfaces or integrating Bootstrap components into your website? Our experts can help you build reliable and user-friendly web solutions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Get in touch with us:<\/strong> <a href=\"https:\/\/pheonixsolutions.com\/contact\">Contact our team<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Post Date: December 16, 2018Last Updated: October 05, 2026 What is a testimonial? Testimonials are written or recorded statements that [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[494,492,496,495,491],"class_list":["post-3102","post","type-post","status-publish","format-standard","hentry","category-web-architecture","tag-bootstrap","tag-carousel","tag-css","tag-html","tag-testimonial","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-O2","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/3102","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=3102"}],"version-history":[{"count":2,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/3102\/revisions"}],"predecessor-version":[{"id":12118,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/3102\/revisions\/12118"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=3102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=3102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=3102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}