Testimonials Page Block


This code snippet will help you quickly and easily create a testimonials page block with two testimonials side by side. Each testimonial comes with an image and title, making it easy to display customer feedback or reviews. You can customize the look and feel of the block with the Bootstrap framework. This code snippet is perfect for any website that wants to showcase customer feedback.

<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 g-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="px-3 px-md-2">
					<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 consectetu reli</p>
					<div class="text-start 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="px-3 px-md-2">
					<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 consectetu reli</p>
					<div class="text-start pt-2">
						<h5 class="fw-bold">John Doe</h5>
						<div class="text-muted">
							HR Manager
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
To top