What is Create Responsive Flip Cards with Bootstrap 5?

In this article, we will learn Create Responsive Flip Cards with Bootstrap 5,This free Bootstrap tutorial for complete beginners will help you learn Bootstrap from scratch.

Create Responsive Flip Cards with Bootstrap 5

Responsive images in Bootstrap with Examples

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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/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.w3wiki.net/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.w3wiki.net/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:

Tags:

#Bootstrap-5 #Dev Scripter 2024 #Bootstrap #Dev Scripter #Project #Web Technologies

Responsive images in Bootstrap with Examples