Bootstrap has a wonderful card component suitable for mobile devices. We have discussed Bootstrap cards and card layouts tutorials in our previous articles. The card component can be used in different styles. In this article let us explain how to create Bootstrap flip card widget.
Bootstrap Flip Card Widget
The widget has front card and backside card. When you hover the mouse or touch on mobile devices, the front card component will flip or rotate to show the backside face. We will explain the flipping in both horizontal and vertical directions.
Horizontal Bootstrap Flip Card Widget
Any Bootstrap widget should have the preliminary CSS and scripts linked in the HTML page. You can either use the CDN links or host the files on your own. Refer our Bootstrap starter template for more details. We will use the CDN link for the Bootstrap 4.0 version for our examples in this article.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
The widget has three parts – frontside, backside and the main imageflip div. CSS transform is used to to rotate the sides to 180 degree in Y axis for creating horizontal flip effect.
Below is the complete CSS for the horizontal flip widget:
.image-flip:hover .backside, .image-flip.hover .backside {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.image-flip:hover .frontside, .image-flip.hover .frontside {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.image-flip {
margin-bottom:200px;
width: 300px;
height: 250px;
}
.mainflip {
-webkit-transition: 1s;
-webkit-transform-style: preserve-3d;
-ms-transition: 1s;
-moz-transition: 1s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 1s;
transform-style: preserve-3d;
position: relative;
}
.frontside, .backside {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 1s;
-webkit-transform-style: preserve-3d;
-moz-transition: 1s;
-moz-transform-style: preserve-3d;
-o-transition: 1s;
-o-transform-style: preserve-3d;
-ms-transition: 1s;
-ms-transform-style: preserve-3d;
transition: 1s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
.frontside {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
z-index: 2;
}
.backside {
background: white;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card, .card-img-top {
border-radius: 0;
}HTML for Bootstrap Flip Widget
We just insert two card components, one inside the frontside div and the other inside the backside div.
<div class="image-flip" ontouchstart="this.classList.toggle('hover');">
<div class="mainflip">
<div class="frontside">
<div class="card" style="width:20rem;">
<img class="card-img-top img- fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is basic card with image on top, title, description and button.</p>
</div>
</div>
</div>
<div class="backside">
<div class="card" style="width:20rem;">
<div class="card-header">
This is a Header
</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card component with header and footer.</p>
<a href="#" class="btn btn-info btn-md">Info Button</a>
</div>
<div class="card-footer">
This is a Footer
</div>
</div>
</div>
</div>
</div>The Complete Widget Code
Putting the CSS and HTML together the complete code should look like below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style type="text/css">
.image-flip:hover .backside, .image-flip.hover .backside {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.image-flip:hover .frontside, .image-flip.hover .frontside {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.image-flip {
margin-bottom:200px;
width: 300px;
height: 250px;
}
.mainflip {
-webkit-transition: 1s;
-webkit-transform-style: preserve-3d;
-ms-transition: 1s;
-moz-transition: 1s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 1s;
transform-style: preserve-3d;
position: relative;
}
.frontside, .backside {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 1s;
-webkit-transform-style: preserve-3d;
-moz-transition: 1s;
-moz-transform-style: preserve-3d;
-o-transition: 1s;
-o-transform-style: preserve-3d;
-ms-transition: 1s;
-ms-transform-style: preserve-3d;
transition: 1s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
.frontside {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
z-index: 2;
}
.backside {
background: white;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card, .card-img-top {
border-radius: 0;
}
</style>
</head>
<body>
<div class="image-flip" ontouchstart="this.classList.toggle('hover');">
<div class="mainflip">
<div class="frontside">
<div class="card" style="width:20rem;">
<img class="card-img-top img- fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is basic card with image on top, title, description and button.</p>
</div>
</div>
</div>
<div class="backside">
<div class="card" style="width:20rem;">
<div class="card-header">
This is a Header
</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">This is a card component with header and footer.</p>
<a href="#" class="btn btn-info btn-md">Info Button</a>
</div>
<div class="card-footer">
This is a Footer
</div>
</div>
</div>
</div>
</div>
</body>
</html>Creating Vertical Card Flip
In the custom CSS code we have used rotateY(180deg) for creating horizontal flip effect. Just change all occurrences of rotateY to rotateX. It will simply change the font and backsides to rotate in vertical direction like below:
Thank you, It is a such greate tutorial, I loved it
Thanks for this tutorial, it’s very beneficial. I have a problem in showing an image on the front and text on the back. If the image is higher than the content of the back, it overlaps the next container. Do you know of a solution?