Bootstrap 5 Testimonials with Flip Animation

A testimonial carousel or slider is a type of UI component used in a website or app that displays the reviews given by customers or users in the form of a slider. This slider type usually includes the reviewer's picture, statement, designation, company name, and other relevant information. Today we will build a Responsive Testimonial Slider using the latest Bootstrap Framework Bootstrap 5 with CSS card flip animation added. Before collecting the source code, watching the following video tutorial will help you understand the code. Our YouTube Channel has many video tutorials on responsive web design, javascript projects, CSS animations, and more topics. If you think these video tutorials will be helpful, stay with us by subscribing to our YouTube channel.

Video Tutorial:

Hope you have watched the above video tutorial. A testimonial carousel is a very important UI component to increase the credibility of any brand and attract more customers. As it shows customer feedback it increases customer confidence and increases your sales. A nicely customized testimonial Carousel is helpful for your website's user experience and search engine rankings as well. In order to stand out and grab your visitors' attention we have also included card flip animation in this project.

You May Also Like:

Bootstrap 5 Testimonials with Card Flip Animation [ Source Code ]:

To build the project, first, create HTML and CSS files and add Bootstrap 5 CDN to it. The whole process is shown in the above tutorial. Then copy the code from the code box below and paste it into your project and save it. Test it in your browser to see if the code is working properly. If it doesn't work then download the code from below download button.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
	<!-- divinectorweb.om -->
<head>
	<meta charset="UTF-8">
	<title>How to create Testimonial Carousel using Bootstrap 5</title>
	<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="container">
		<div class="carousel slide" data-bs-ride="carousel" id="carouselExampleSlidesOnly">
			
			<div class="carousel-inner">
				<div class="carousel-item active">
					<div class="row">
						<div class="col-lg-4">
							<div class="card">
								<div class="box front">
									<img alt="" src="img/3.jpg">
									<h2>Jesicca Doe</h2>
									<h4>CEO, Microsoft</h4>
									<p class="socials">
										<i class="fa fa-facebook"></i>
										<i class="fa fa-twitter"></i>
										<i class="fa fa-linkedin"></i>
										<i class="fa fa-youtube"></i>
									</p>
								</div>
								<div class="box back">
									<span class="fa fa-quote-left"></span>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores soluta quidem dolorem debitis. Minima, optio illum magni exercitationem eum laborum! Incidunt sequi repellat vero.
									</p>
								</div>
							</div>
						</div>
						<div class="col-lg-4">
							<div class="card">
								<div class="box front">
									<img alt="" src="img/5.jpg">
									<h2>Claire Chedd</h2>
									<h4>CEO, Microsoft</h4>
									<p class="socials">
										<i class="fa fa-facebook"></i>
										<i class="fa fa-twitter"></i>
										<i class="fa fa-linkedin"></i>
										<i class="fa fa-youtube"></i>
									</p>
								</div>
								<div class="box back">
									<span class="fa fa-quote-left"></span>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores soluta quidem dolorem debitis. Minima, optio illum magni exercitationem eum laborum! Incidunt sequi repellat vero.
									</p>
								</div>
							</div>
						</div>
						<div class="col-lg-4">
							<div class="card">
								<div class="box front">
									<img alt="" src="img/2.jpg">
									<h2>Maria Lopez</h2>
									<h4>CEO, Microsoft</h4>
									<p class="socials">
										<i class="fa fa-facebook"></i>
										<i class="fa fa-twitter"></i>
										<i class="fa fa-linkedin"></i>
										<i class="fa fa-youtube"></i>
									</p>
								</div>
								<div class="box back">
									<span class="fa fa-quote-left"></span>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores soluta quidem dolorem debitis. Minima, optio illum magni exercitationem eum laborum! Incidunt sequi repellat vero.
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="carousel-item">
					<div class="row">
						<div class="col-lg-4">
							<div class="card">
								<div class="box front">
									<img alt="" src="img/1.jpg">
									<h2>Jesicca Doe</h2>
									<h4>CEO, Microsoft</h4>
									<p class="socials">
										<i class="fa fa-facebook"></i>
										<i class="fa fa-twitter"></i>
										<i class="fa fa-linkedin"></i>
										<i class="fa fa-youtube"></i>
									</p>
								</div>
								<div class="box back">
									<span class="fa fa-quote-left"></span>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores soluta quidem dolorem debitis. Minima, optio illum magni exercitationem eum laborum! Incidunt sequi repellat vero.
									</p>
								</div>
							</div>
						</div>
						<div class="col-lg-4">
							<div class="card">
								<div class="box front">
									<img alt="" src="img/2.jpg">
									<h2>Claire Chedd</h2>
									<h4>CEO, Microsoft</h4>
									<p class="socials">
										<i class="fa fa-facebook"></i>
										<i class="fa fa-twitter"></i>
										<i class="fa fa-linkedin"></i>
										<i class="fa fa-youtube"></i>
									</p>
								</div>
								<div class="box back">
									<span class="fa fa-quote-left"></span>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores soluta quidem dolorem debitis. Minima, optio illum magni exercitationem eum laborum! Incidunt sequi repellat vero.
									</p>
								</div>
							</div>
						</div>
						<div class="col-md-4">
							<div class="card">
								<div class="box front">
									<img alt="" src="img/3.jpg">
									<h2>Mary Joe</h2>
									<h4>CEO, Microsoft</h4>
									<p class="socials">
										<i class="fa fa-facebook"></i>
										<i class="fa fa-twitter"></i>
										<i class="fa fa-linkedin"></i>
										<i class="fa fa-youtube"></i>
									</p>
								</div>
								<div class="box back">
									<span class="fa fa-quote-left"></span>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores soluta quidem dolorem debitis. Minima, optio illum magni exercitationem eum laborum! Incidunt sequi repellat vero.
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="carousel-item">
					<div class="row">
						<div class="col-lg-4">
							<div class="card">
								<div class="box front">
									<img alt="" src="img/4.jpg">
									<h2>Jesicca Doe</h2>
									<h4>CEO, Microsoft</h4>
									<p class="socials">
										<i class="fa fa-facebook"></i>
										<i class="fa fa-twitter"></i>
										<i class="fa fa-linkedin"></i>
										<i class="fa fa-youtube"></i>
									</p>
								</div>
								<div class="box back">
									<span class="fa fa-quote-left"></span>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores soluta quidem dolorem debitis. Minima, optio illum magni exercitationem eum laborum! Incidunt sequi repellat vero.
									</p>
								</div>
							</div>
						</div>
						<div class="col-lg-4">
							<div class="card">
								<div class="box front">
									<img alt="" src="img/5.jpg">
									<h2>Claire Chedd</h2>
									<h4>CEO, Microsoft</h4>
									<p class="socials">
										<i class="fa fa-facebook"></i>
										<i class="fa fa-twitter"></i>
										<i class="fa fa-linkedin"></i>
										<i class="fa fa-youtube"></i>
									</p>
								</div>
								<div class="box back">
									<span class="fa fa-quote-left"></span>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores soluta quidem dolorem debitis. Minima, optio illum magni exercitationem eum laborum! Incidunt sequi repellat vero.
									</p>
								</div>
							</div>
						</div>
						<div class="col-lg-4">
							<div class="card">
								<div class="box front">
									<img alt="" src="img/6.jpg">
									<h2>Mary Joe</h2>
									<h4>CEO, Microsoft</h4>
									<p class="socials">
										<i class="fa fa-facebook"></i>
										<i class="fa fa-twitter"></i>
										<i class="fa fa-linkedin"></i>
										<i class="fa fa-youtube"></i>
									</p>
								</div>
								<div class="box back">
									<span class="fa fa-quote-left"></span>
									<p>
										Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores soluta quidem dolorem debitis. Minima, optio illum magni exercitationem eum laborum! Incidunt sequi repellat vero.
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>			


		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
	</script> 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js">
	</script> 
	<script>
	</script>
</body>
</html>

ADD CSS:

body {
	background: #0259f0;
	height: 70vh;
	font-family: 'Poppins', sans-serif;
}
.container {
	margin-top: 15%;
}
.card {
    width: 100%;
    height: 300px;
    transform-style: preserve-3d;
    perspective: 500px;
    border: none;
    background-color: inherit;
}

.card .box {
    position: absolute;
    color: #262626;
    width: 100%;
    height: 100%;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    background: #fff;
    transform-style: preserve-3d;
    transition: 0.5s;
    backface-visibility: hidden;
}
.card .box.front{
    background-image: url(img/pattern.png);
    background-repeat: repeat;
}
.card .box.front,
.card .box.back {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card .box.front img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	border: 5px solid #262626;
	margin-bottom: 25px;
}

.card:hover .box.front {
    transform: rotateY(180deg);
}
.box.front h2 {
	font-family: 'Bebas Neue', cursive;
}
.box.front h4 {
	font-size: 18px;
	letter-spacing: 2px;
}
.socials i {
	margin: 0 15px;
}
.card .box.back {
    position: absolute;
    background: #fff;
    transform: rotateY(180deg);
    padding: 20px 30px;
    text-align: center;
    user-select: none;
}

.card .box.back .fa-quote-left {
	position: absolute;
	top: 25px;
	left: 180px;
	font-size: 3.2rem;
}

.card:hover .box.back {
    transform: rotateY(360deg);
}

@media(max-width: 991.5px) {
    .col-lg-4 {
        margin-top: 40px;
        margin-bottom: 20px;
    }
}

Hope the downloaded code is working properly. Our website comes with many more such snippets that you may find useful. If you want to view or download these projects then visit our website homepage and click on the load more button below. Thank you very much for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Bootstrap 5 Testimonials with Card Flip Animation [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Bootstrap 5 Testimonials with Flip Animation

Video Tutorial:

Bootstrap 5 Testimonials with Card Flip Animation [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form