Vertical Testimonials Example


This vertical testimonials example shows you how testimonials can be stacked on top of each other with the help of Bootstrap. Every testimonial has a title and image, giving your website a professional and modern look. With this code snippet, you can easily add a vertical testimonials section to your website.

<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 justify-content-center">
			<div class="col-lg-8">
				<div class="d-flex align-items-start mb-4">
					<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-4">
						<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 class="lead">At half-past eight the door opened, the policeman appeared, and, requesting them to follow him, led the way to an adjoining hall</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="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-4">
						<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 class="lead">At half-past eight the door opened, the policeman appeared, and, requesting them to follow him, led the way to an adjoining hall</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>
		</div>
	</div>
</section>
To top