Testimonials Section Template


Create an engaging, professional-looking testimonials section for your website with this free Bootstrap code snippet. It includes three sections with images, titles, and descriptions for each testimonial. This template is easy to customize and use, and will help you create a great-looking page in minutes. No complicated coding required!

<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 py-5">
			<div class="col-md-4 py-2 py-md-2">
				<div class="bg-light mb-5 mb-md-0 p-2 p-lg-5 text-center position-relative">
					<img alt="" class="rounded-circle position-absolute translate-middle top-0" height="96" src="https://freefrontend.dev/assets/square-small.png" width="96">
					<div class="text-primary mb-md-4 mb-2 mt-5 mt-lg-4">
						<svg class="bi bi-quote" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" 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 class="mb-4">Lorem ipsum dolor sit consectetur adipisicing sit amet consectetur adipisicing elit sit</p>
					<h6 class="mt-4 fw-bold">John Doe</h6>
					<div class="text-muted">
						HR Manager
					</div>
				</div>
			</div>
			<div class="col-md-4 py-2 py-md-2">
				<div class="bg-light mb-5 mb-md-0 p-2 p-lg-5 text-center position-relative">
					<img alt="" class="rounded-circle position-absolute translate-middle top-0" height="96" src="https://freefrontend.dev/assets/square-small.png" width="96">
					<div class="text-primary mb-md-4 mb-2 mt-5 mt-lg-4">
						<svg class="bi bi-quote" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" 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 class="mb-4">Lorem ipsum dolor sit consectetur adipisicing sit amet consectetur adipisicing elit sit</p>
					<h6 class="mt-4 fw-bold">John Doe</h6>
					<div class="text-muted">
						Graphic Designer
					</div>
				</div>
			</div>
			<div class="col-md-4 py-2 py-md-2">
				<div class="bg-light mb-5 mb-md-0 p-2 p-lg-5 text-center position-relative">
					<img alt="" class="rounded-circle position-absolute translate-middle top-0" height="96" src="https://freefrontend.dev/assets/square-small.png" width="96">
					<div class="text-primary mb-md-4 mb-2 mt-5 mt-lg-4">
						<svg class="bi bi-quote" fill="currentColor" height="48" viewbox="0 0 16 16" width="48" 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 class="mb-4">Lorem ipsum dolor sit consectetur adipisicing sit amet consectetur adipisicing elit sit</p>
					<h6 class="mt-4 fw-bold">Jow Reo</h6>
					<div class="text-muted">
						Founder & CEO
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
To top