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.
26
Components
66
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Immerse in a modern audio experience with our neumorphic music player, featuring a dynamic waveform scrubber and interactive queue visuals.
Revolutionize your AI interactions with this stunning, neon-infused chat interface. With dynamic status indicators and orbital animations, it captivates and informs.
Craft seamless schedules with an elegant neumorphic interface where you can drag and select time ranges effortlessly in a futuristic calendar view.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.