Vertical Testimonials Snippet


This code snippet provides a vertical testimonials design that is sure to attract attention. Testimonials are neatly stacked on top of each other with stylish indentation, allowing for easy readability. Each testimonial includes an image, title, and text, making it easy to customize and tailor to your needs. With this code snippet, you can easily add a touch of style 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">
				<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><img alt="" class="img-fluid rounded-circle ms-3" height="96" src="https://freefrontend.dev/assets/square-small.png" width="96"></div>
			</div>
		</div>
	</div>
</section>
To top