Create Responsive Flip Cards with Bootstrap 5

Last Updated : 25 Jul, 2024

Responsive Flip Cards utilize CSS and Bootstrap to create interactive card elements that flip to reveal content on hover, staying centered within the screen for optimal display on various devices. In this article, we will create Responsive Flip Cards with Bootstrap 5.

Preview:

Prerequisites

Approach

We will add the CDN link of Bootstrap into our HTML file so that we can use Bootstrap code/ component in our file.
We have created a flip-card-front and flip-card-back component.
We have attached one HTML tutorial image to the front component and a ReactJS Tutorial image to the flip-card-back component.
This enables us to flip the card when anyone hovers on the card. It flips to the opposite side.

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,
								initial-scale=1.0">
	<title>Responsive Flip Cards</title>
	<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
		rel="stylesheet">
	<style>
		.flip-card {
			perspective: 1000px;
		}

		.flip-card-inner {
			position: relative;
			width: 100%;
			height: 100%;
			text-align: center;
			transition: transform 0.6s;
			transform-style: preserve-3d;
		}

		.flip-card:hover .flip-card-inner {
			transform: rotateY(180deg);
		}

		.flip-card-front,
		.flip-card-back {
			position: absolute;
			width: 100%;
			height: 100%;
			backface-visibility: hidden;
		}

		.flip-card-front {
			background-color: #f8f9fa;
			color: #000;
		}

		.flip-card-back {
			background-color: #343a40;
			color: #000;
			transform: rotateY(180deg);
		}

		.card-img-top {
			max-height: 200px;
			object-fit: cover;
		}
	</style>
</head>

<body>

	<div class="container">
		<div class="row">
			<div class="col-lg-4 col-md-6">
				<div class="flip-card">
					<div class="flip-card-inner">
						<div class="flip-card-front">
							<div class="card">
								<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230305182658/HTML-tutorial.jpg"
									class="card-img-top" alt="Front Image">
								<div class="card-body">
									<h5 class="card-title">Front Side</h5>
									<p class="card-text">HTML</p>
								</div>
							</div>
						</div>
						<div class="flip-card-back">
							<div class="card">
								<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20230310153232/ReactJS-Tutorial.jpg"
									class="card-img-top" alt="Back Image">
								<div class="card-body">
									<h5 class="card-title">Back Side</h5>
									<p class="card-text">React JS</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</body>

</html>

Output:

Create Responsive Flip Cards with Bootstrap 5

geekcoder2298

Improve

Article Tags :

Create Responsive Flip Cards with Bootstrap 5

Preview:

Prerequisites

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?