Bootstrap 5 Snippet Testimonial Slider CSS — a free Bootstrap 5 carousel snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
1<section class="body">
2 <div class="container">
3 <h1 class="section-header"><b>Testimonial Design</b></h1>
4 <p class="text-muted text-center">What people say</p>
5 <div class="testimonial-view">
6 <div id="testimonialCarousel" class="carousel slide" data-bs-ride="carousel">
7 <div class="carousel-inner">
8 <div class="carousel-item active">
9 <div class="testimonial-block">
10 <div class="row">
11 <div class="col-md-5">
12 <div class="testimonial-block_user">
13 <div class="testimonial-block_user_image">
14 <img src="https://i.imgur.com/R63flEo.jpg" alt="User">
15 </div>
16 <div class="testimonial-block_user_info">
17 <h2 class="testimonial-block_user_info_name">Krishna</h2>
18 <h4>Customer</h4>
19 </div>
20 </div>
21 </div>
22 <div class="col-md-6">
23 <div class="testimonial-block_content">
24 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis consequuntur repellendus nemo suscipit explicabo veniam similique quaerat vitae! Alias reprehenderit aliquam temporibus porro iste corrupti laboriosam nihil eos? Nemo ratione, provident! Suscipit, accusantium. Molestias, reiciendis, in nihil perferendis similique voluptas aliquam, nisi consectetur eum, atque nemo sint. Nostrum, reprehenderit, quod.</p>
25 </div>
26 </div>
27 </div>
28 </div>
29 </div>
30 <div class="carousel-item">
31 <div class="testimonial-block">
32 <div class="row">
33 <div class="col-md-5">
34 <div class="testimonial-block_user">
35 <div class="testimonial-block_user_image">
36 <img src="https://i.imgur.com/G8pFZ8p.jpg" alt="User">
37 </div>
38 <div class="testimonial-block_user_info">
39 <h2 class="testimonial-block_user_info_name">Himanshu</h2>
40 <h4>Customer</h4>
41 </div>
42 </div>
43 </div>
44 <div class="col-md-6">
45 <div class="testimonial-block_content">
46 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis consequuntur repellendus nemo suscipit explicabo veniam similique quaerat vitae! Alias reprehenderit aliquam temporibus porro iste corrupti laboriosam nihil eos? Nemo ratione, provident! Suscipit, accusantium. Molestias, reiciendis, in nihil perferendis similique voluptas aliquam, nisi consectetur eum, atque nemo sint. Nostrum, reprehenderit, quod.</p>
47 </div>
48 </div>
49 </div>
50 </div>
51 </div>
52 <div class="carousel-item">
53 <div class="testimonial-block">
54 <div class="row">
55 <div class="col-md-5">
56 <div class="testimonial-block_user">
57 <div class="testimonial-block_user_image">
58 <img src="https://i.imgur.com/XePzDSG.jpg" alt="User">
59 </div>
60 <div class="testimonial-block_user_info">
61 <h2 class="testimonial-block_user_info_name">Aliya</h2>
62 <h4>Customer</h4>
63 </div>
64 </div>
65 </div>
66 <div class="col-md-6">
67 <div class="testimonial-block_content">
68 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis consequuntur repellendus nemo suscipit explicabo veniam similique quaerat vitae! Alias reprehenderit aliquam temporibus porro iste corrupti laboriosam nihil eos? Nemo ratione, provident! Suscipit, accusantium. Molestias, reiciendis, in nihil perferendis similique voluptas aliquam, nisi consectetur eum, atque nemo sint. Nostrum, reprehenderit, quod.</p>
69 </div>
70 </div>
71 </div>
72 </div>
73 </div>
74 </div>
75 <a class="carousel-control-prev" href="#testimonialCarousel" role="button" data-bs-slide="prev">
76 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
77 <span class="visually-hidden">Previous</span>
78 </a>
79 <a class="carousel-control-next" href="#testimonialCarousel" role="button" data-bs-slide="next">
80 <span class="carousel-control-next-icon" aria-hidden="true"></span>
81 <span class="visually-hidden">Next</span>
82 </a>
83 </div>
84 </div>
85 </div>
86 </section>
Bootstrap 5 carousel with multiple cards
Free Bootstrap 5 carousel snippet — Bootstrap 5 carousel with multiple cards. Preview, copy HTML, CSS & JS, drop it into any Bootstrap 5 project.
Sliding tabs | CSS transitions only
Sliding tabs | CSS transitions only — a free Bootstrap 5 carousel snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
Bootstrap Services in circle slider snippet
Bootstrap Services in circle slider snippet: a hand-crafted, open-source Bootstrap 5 carousel. HTML, CSS & JS included, ready to copy.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
13
Views
6
Likes
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.