Testimonials

Testimonials

Display customer reviews and social proof with the testimonial shortcodes. Canvas ships a carousel-based testimonial (.testimonials-carousel) with an author column and a .testi-content quote column, plus a lightweight .quote-bubble style for compact Twitter-like grids.

Structure

• .testimonials-carousel - Owl carousel wrapper for rotating testimonials
• .oc-item - a single testimonial slide inside the carousel
• .testi-content - the column holding the quote paragraph
• .quote-bubble - a standalone speech-bubble quote block (add .quote-bubble-left to point the tail to the left)
• .testimonials-rating - star rating row (uses .bi-star-fill icons)

Carousel Testimonial

<div id="oc-testi" class="owl-carousel testimonials-carousel carousel-widget" data-margin="0" data-items="1">
	<div class="oc-item">
		<div class="row g-0 align-items-center">
			<div class="col-md-4 d-flex flex-column text-center align-items-center">
				<img src="images/authors/2.jpg" alt="Gordon Norman" class="rounded-circle mb-3 w-auto" width="64" height="64">
				<h4 class="mb-0"><a class="text-dark" href="#">Gordon Norman</a></h4>
				<h5 class="text-muted mb-0 fw-normal">Author</h5>
			</div>
			<div class="col-md-8 p-4 testi-content">
				<p class="text-larger mb-0">"Canvas has completely transformed how I approach web design. Every component works exactly as expected right out of the box."</p>
			</div>
		</div>
	</div>
</div>

Quote Bubble Grid

Use .quote-bubble for a compact review grid. The bubble accepts Bootstrap background utilities (.bg-dark, .bg-primary) for colored variants.

<div class="row flex-row-reverse g-2">
	<div class="col">
		<div class="quote-bubble quote-bubble-left mb-3">
			<p>Canvas made launching our marketing site effortless. The layouts are clean, fast, and easy to maintain.</p>
		</div>
		<h4 class="ps-3 h6 mb-0 fw-medium">John Doe</h4>
		<small class="ps-3 text-muted">Google Inc.</small>
	</div>
	<div class="col-auto">
		<img class="rounded-circle mt-1" src="images/testimonials/1.jpg" width="48" alt="Customer">
	</div>
</div>

Options

• data-items sets how many testimonials show per view (usually 1 for a single quote).
• data-pagi="false" hides the dots; data-nav="false" hides the prev/next arrows.
• data-animate-in / data-animate-out (e.g. fadeIn / fadeOut) animate slide transitions.
• Add a star row with .testimonials-rating and repeated <i class="bi-star-fill"></i> icons.

Tips

• For a card-style review grid, wrap each quote in a Bootstrap .card with .card-body and place the rating inside.
• Reverse the layout (image on the right) with Bootstrap's .flex-row-reverse on the row.