How to Create a Dark Themed User Testimonial in Bootstrap ?

Last Updated : 06 May, 2024

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.

Approach

Create 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>