How to Create a Dark Themed User Testimonial in Bootstrap ? Last Updated : 06 May, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Incorporating user testimonials into your website using Bootstrap 5 is an effective way to showcase positive feedback and build customer trust. With Bootstrap 5's flexible styling options, you can easily customize the appearance of testimonials to align with your brand's aesthetic while maintaining a professional look. ApproachCreate the basic layout using HTML elements and integrate Bootstrap for styling using Bootstrap CDN Links.Testimonial cards are created using Bootstrap's card component within a row of columns. Each card contains an image, testimonial text, and user information structured using Bootstrap's list group component.Testimonial images are sourced from external URLs and displayed as rounded-circle images using Bootstrap's utility classes.The testimonial text and user information are enclosed within <ul> elements with the classes list-group and bg-transparent to customize the appearance.Testimonial details such as the testimonial text, user name, and occupation are provided as text content within <li> elements with appropriate classes to style them accordingly.Example: The example below shows how to create a dark-themed User testimonial in Bootstrap 5. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dark Themed User Testimonial with List Group </title> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <style> .testimonial-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } </style> </head> <body class="bg-dark text-white pt-5"> <div class="container"> <div class="row justify-content-center"> <div class="col-md-4 mb-4"> <div class="card bg-secondary border-0 rounded-3 p-4 testimonial-card"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240426035329/download.jpg" class="card-img-top rounded-circle mx-auto d-block" alt="User Image"> <ul class="list-group bg-transparent border-0"> <li class="list-group-item bg-transparent border-0"> <p class="mb-0 text-white"> "GeeksforGeeks has been my go-to platform for mastering computer science concepts and enhancing my coding skills. With its vast array of tutorials, coding challenges." </p> </li> <li class="list-group-item bg-transparent border-0 text-white font-weight-bold"> Bishal Paul </li> <li class="list-group-item bg-transparent border-0 text-white card-text small"> Engineer, NIC </li> </ul> </div> </div> <div class="col-md-4 mb-4"> <div class="card bg-secondary border-0 rounded-3 p-4 testimonial-card"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240426035200/7d34d9d53640af5cfd2614c57dfa7f13.jpg" class="card-img-top rounded-circle mx-auto d-block" alt="User Image"> <ul class="list-group bg-transparent border-0"> <li class="list-group-item bg-transparent border-0"> <p class="mb-0 text-white"> "I've found GeeksforGeeks incredibly helpful for improving my coding skills and understanding complex algorithms." </p> </li> <li class="list-group-item bg-transparent border-0 text-white font-weight-bold"> Dino Kalita </li> <li class="list-group-item bg-transparent border-0 text-white card-text small"> Software Engineer </li> </ul> </div> </div> <div class="col-md-4 mb-4"> <div class="card bg-secondary border-0 rounded-3 p-4 testimonial-card"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240426035114/79dd11a9452a92a1accceec38a45e16a.jpg" class="card-img-top rounded-circle mx-auto d-block" alt="User Image"> <ul class="list-group bg-transparent border-0"> <li class="list-group-item bg-transparent border-0"> <p class="mb-0 text-white"> "GeeksforGeeks provides top-notch resources that have been instrumental in my software development journey." </p> </li> <li class="list-group-item bg-transparent border-0 text-white font-weight-bold"> Khogen Mahanta </li> <li class="list-group-item bg-transparent border-0 text-white card-text small"> Web Developer </li> </ul> </div> </div> <div class="col-md-4 mb-4"> <div class="card bg-secondary border-0 rounded-3 p-4 testimonial-card"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240426034919/360_F_244438372_tqgUKRtdGk61Z6YuK79ufAhYpgXcB7xv.jpg" class="card-img-top rounded-circle mx-auto d-block" alt="User Image"> <ul class="list-group bg-transparent border-0"> <li class="list-group-item bg-transparent border-0"> <p class="mb-0 text-white"> "GeeksforGeeks has been my constant companion in learning and implementing new programming concepts." </p> </li> <li class="list-group-item bg-transparent border-0 text-white font-weight-bold"> Jublee Garg </li> <li class="list-group-item bg-transparent border-0 text-white card-text small"> Full Stack Developer </li> </ul> </div> </div> <div class="col-md-4 mb-4"> <div class="card bg-secondary border-0 rounded-3 p-4 testimonial-card"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20240426034805/360_F_244436923_vkMe10KKKiw5bjhZeRDT05moxWcPpdmb.jpg" class="card-img-top rounded-circle mx-auto d-block" alt="User Image"> <ul class="list-group bg-transparent border-0"> <li class="list-group-item bg-transparent border-0"> <p class="mb-0 text-white"> "Thanks to GeeksforGeeks, I've been able to tackle challenging coding problems with ease." </p> </li> <li class="list-group-item bg-transparent border-0 text-white font-weight-bold"> Mark Zuckerberg </li> <li class="list-group-item bg-transparent border-0 text-white card-text small"> Data Scientist </li> </ul> </div> </div> </div> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to Create a Dark Themed User Testimonial in Bootstrap ? B bishalpaul34 Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-Questions Similar Reads How to Create Floating Testimonial in Bootstrap ? In this article, we will explore how to create an advanced floating testimonial using Bootstrap. We will guide you through setting up the HTML structure, applying Bootstrap classes for styling, and implementing smooth floating effects with CSS. This technique enhances the visual appeal of testimonia 2 min read How to Create Dark/Light Theme in Bootstrap with React? Creating dark/light themes and integrating them into a React application enhances user experience by providing visual customization options, improving readability, and allowing users to switch between themes based on their preferences. In this article, we will learn to create dark/light theme in Boo 3 min read How to Create Testimonial Slider in Bootstrap? Testimonial Sliders are interactive components in web design, often used to display multiple images or content sequentially. They're useful for showcasing testimonials of the students or users one after another. Here, we will see how to create a testimonial Slider in Bootstrap 5. ApproachFirst, crea 4 min read How to create your own React Bootstrap theme ? In this article, we will learn how to create our own react-bootstrap theme on a website Themestr.app and add it to our react project.Features:No need to think about responsiveness.A wide range of color options is available to choose from.Very easy to work and integrate into the project.Prerequisite: 3 min read How to Create a Bootstrap Dark Theme without Duplicating CSS ? In this article, we will create a bootstrap dark theme without duplicating CSS. Creating a Bootstrap dark theme without duplicating CSS can help you maintain a more organized and efficient codebase for your web projects. In this article, we will explore different approaches to achieving a dark theme 4 min read Like