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 ReacrJs 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=
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=
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=
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: