Testimonials Example


The code snippet from FreeFrontend.dev makes it easy to create a visually appealing testimonials section on your website. With this snippet, you can place two testimonials side by side and each one will have an image, title, and a personalized message from your customer. This is an easy way to make your website stand out and show off the positive experiences of your customers.

<section class="py-5">
	<div class="container">
		<div class="row justify-content-center text-center mb-2 mb-lg-4">
			<div class="col-12 col-lg-8 col-xxl-7 text-center mx-auto">
				<span class="text-muted">Raving Fans</span>
				<h2 class="display-5 fw-bold">Our Testimonials</h2>
				<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta harum ipsum venenatis metus sem veniam eveniet aperiam suscipit.</p>
			</div>
		</div>
		<div class="row gy-5 py-4">
			<div class="col-lg-6 d-flex align-items-start">
				<img alt="" class="img-fluid rounded-circle me-3" height="96" src="https://freefrontend.dev/assets/square-small.png" width="96">
				<div class="bg-light p-3 p-md-5">
					<div class="text-primary mb-1">
						<svg class="bi bi-quote" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
						<path d="M12 12a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1h-1.388c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 9 7.558V11a1 1 0 0 0 1 1h2Zm-6 0a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1H4.612c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 3 7.558V11a1 1 0 0 0 1 1h2Z"></path></svg>
					</div>
					<p>Lorem ipsum dolor sit amet consectetur eli Lorem ipsum dolor sit amet consectetur eli Lorem ipsum dolor sit amet consectetur eliLorem ipsum dolor sit amet consectetureli</p>
					<div class="text-end pt-2">
						<h5 class="fw-bold">John Doe</h5>
						<div class="text-muted">
							Graphic Designer
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-6 d-flex align-items-start">
				<img alt="" class="img-fluid rounded-circle me-3" height="96" src="https://freefrontend.dev/assets/square-small.png" width="96">
				<div class="bg-light p-3 p-md-5">
					<div class="text-primary mb-1">
						<svg class="bi bi-quote" fill="currentColor" height="32" viewbox="0 0 16 16" width="32" xmlns="http://www.w3.org/2000/svg">
						<path d="M12 12a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1h-1.388c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 9 7.558V11a1 1 0 0 0 1 1h2Zm-6 0a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1H4.612c0-.351.021-.703.062-1.054.062-.372.166-.703.31-.992.145-.29.331-.517.559-.683.227-.186.516-.279.868-.279V3c-.579 0-1.085.124-1.52.372a3.322 3.322 0 0 0-1.085.992 4.92 4.92 0 0 0-.62 1.458A7.712 7.712 0 0 0 3 7.558V11a1 1 0 0 0 1 1h2Z"></path></svg>
					</div>
					<p>Lorem ipsum dolor sit amet consectetur eli Lorem ipsum dolor sit amet consectetur eli Lorem ipsum dolor sit amet consectetur eliLorem ipsum dolor sit amet consectetureli</p>
					<div class="text-end pt-2">
						<h5 class="fw-bold">John Doe</h5>
						<div class="text-muted">
							HR Manager
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
To top