React Bootstrap Flipping Cards

React Flipping Cards - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

React flipping card is a card animation that gives an element effect of flipping to the other side upon the interaction.

See two basic Bootstrap flipping card examples:

Basic examples

Image with a photo of clouds.
Sample avatar image.

Marie Johnson

Web developer

Click here to rotate

About me

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime?

Click here to rotate back 
        
            
          import React, { Component } from "react";
          import {
            MDBContainer,
            MDBCol,
            MDBRow,
            MDBCard,
            MDBCardUp,
            MDBCardBody,
            MDBAvatar,
            MDBRotatingCard,
            MDBIcon,
          } from "mdbreact";
  
          class FlippingCardPage extends Component {
            state = {
              flipped1: false,
            };
  
            handleFlipping = (id) => () => {
              const cardId = `flipped${id}`;
              this.setState({ [cardId]: !this.state[cardId] });
            };
  
            render() {
              return (
                <MDBContainer>
                  <MDBRow between>
                    <MDBCol style={{ minHeight: "26rem", maxWidth: "22rem" }}>
                      <MDBRotatingCard
                        flipped={this.state.flipped1}
                        className="text-center h-100 w-100"
                      >
                        <MDBCard className="face front">
                          <MDBCardUp>
                            <img
                              className="card-img-top"
                              src="https://mdbootstrap.com/img/Photos/Others/photo7.webp"
                              alt=""
                            />
                          </MDBCardUp>
                          <MDBAvatar className="mx-auto white" circle>
                            <img
                              src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).webp"
                              alt=""
                              className="rounded-circle"
                            />
                          </MDBAvatar>
                          <MDBCardBody>
                            <h4 className="font-weight-bold mb-3">Marie Johnson</h4>
                            <p className="font-weight-bold blue-text">Web developer</p>
                            <a
                              href="#!"
                              className="rotate-btn text-dark"
                              data-card="card-1"
                              onClick={this.handleFlipping(1)}
                            >
                              <MDBIcon icon="redo" /> Click here to rotate
                            </a>
                          </MDBCardBody>
                        </MDBCard>
                        <MDBCard className="face back" style={{ height: "400px" }}>
                          <MDBCardBody>
                            <h4 className="font-weight-bold">About me</h4>
                            <hr />
                            <p>
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                              Maxime quae, dolores dicta. Blanditiis rem amet repellat,
                              dolores nihil quae in mollitia asperiores ut rerum
                              repellendus, voluptatum eum, officia laudantium quaerat?
                            </p>
                            <hr />
                            <ul className="list-inline py-2">
                              <li className="list-inline-item">
                                <a href="#!" className="p-2 fa-lg fb-ic">
                                  <MDBIcon fab icon="facebook-f" />
                                </a>
                              </li>
                              <li className="list-inline-item">
                                <a href="#!" className="p-2 fa-lg tw-ic">
                                  <MDBIcon fab icon="twitter" />
                                </a>
                              </li>
                              <li className="list-inline-item">
                                <a href="#!" className="p-2 fa-lg gplus-ic">
                                  <MDBIcon fab icon="google-plus" />
                                </a>
                              </li>
                              <li className="list-inline-item">
                                <a href="#!" className="p-2 fa-lg li-ic">
                                  <MDBIcon fab icon="linkedin" />
                                </a>
                              </li>
                            </ul>
                            <a
                              href="#!"
                              className="rotate-btn text-dark"
                              data-card="card-1"
                              onClick={this.handleFlipping(1)}
                            >
                              <MDBIcon icon="undo" /> Click here to rotate back
                            </a>
                          </MDBCardBody>
                        </MDBCard>
                      </MDBRotatingCard>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              );
            }
          }
  
          export default FlippingCardPage;

Rotating card with button

Click on the button to launch the animation.

Example photo

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime.

Read more

Social shares

Join our community
        
            
          import React, { Component } from "react";
          import {
            MDBContainer,
            MDBCol,
            MDBRow,
            MDBCard,
            MDBCardBody,
            MDBCardImage,
            MDBCardTitle,
            MDBCardText,
            MDBRotatingCard,
            MDBIcon,
            MDBBtn,
          } from "mdbreact";
  
          class FlippingCardPage extends Component {
            state = {
              flipped2: false,
            };
  
            handleFlipping = (id) => () => {
              const cardId = `flipped${id}`;
              this.setState({ [cardId]: !this.state[cardId] });
            };
  
            render() {
              return (
                <MDBContainer>
                  <MDBRow between>
                    <MDBCol style={{ minHeight: "26rem", maxWidth: "22rem" }}>
                      <MDBRotatingCard
                        flipped={this.state.flipped2}
                        className="text-center h-100 w-100"
                      >
                        <MDBCard className="face back text-center">
                          <MDBCardBody>
                            <MDBCardTitle className="text-ceter font-weight-bold my-4">
                              Social shares
                              <MDBIcon
                                icon="close rotate-btn text-muted"
                                onClick={this.handleFlipping(2)}
                              />
                            </MDBCardTitle>
                            <hr />
                            <div>
                              <MDBRow center className="flex-wrap">
                                <MDBBtn tag="a" floating social="dribble">
                                  <MDBIcon fab icon="dribbble" />
                                </MDBBtn>
                                <MDBBtn tag="a" floating social="slack">
                                  <MDBIcon fab icon="slack" />
                                </MDBBtn>
                                <MDBBtn tag="a" floating social="ins">
                                  <MDBIcon fab icon="instagram" />
                                </MDBBtn>
                                <MDBBtn tag="a" floating social="pin">
                                  <MDBIcon fab icon="pinterest" />
                                </MDBBtn>
                                <MDBBtn tag="a" floating social="tw">
                                  <MDBIcon fab icon="twitter" />
                                </MDBBtn>
                                <MDBBtn tag="a" floating social="gplus">
                                  <MDBIcon fab icon="google-plus-g" />
                                </MDBBtn>
                                <MDBBtn tag="a" floating social="git">
                                  <MDBIcon fab icon="github" />
                                </MDBBtn>
                              </MDBRow>
                              <h5 className="font-weight-bold my-4">
                                Join our community
                              </h5>
                            </div>
                            <hr />
                            <MDBRow center className="flex-wrap">
                              <MDBBtn tag="a" social="fb" className="px-4">
                                <MDBIcon fab icon="facebook-f" />
                              </MDBBtn>
                              <MDBBtn tag="a" social="tw" className="px-4">
                                <MDBIcon fab icon="twitter" />
                              </MDBBtn>
                              <MDBBtn tag="a" social="li" className="px-4">
                                <MDBIcon fab icon="linkedin-in" />
                              </MDBBtn>
                              <MDBBtn tag="a" social="ins" className="px-4">
                                <MDBIcon fab icon="instagram" />
                              </MDBBtn>
                            </MDBRow>
                          </MDBCardBody>
                        </MDBCard>
                        <MDBCard className="face front">
                          <MDBCardImage
                            top
                            src="https://mdbootstrap.com/img/Photos/Others/photo5.webp"
                            overlay="white-slight"
                            hover
                            waves
                            alt="MDBCard image cap"
                          />
                          <MDBCardBody className="text-center">
                            <MDBCardTitle tag="h4">
                              MDBCard Title
                              <MDBIcon
                                icon="share-alt text-dark float-right"
                                onClick={this.handleFlipping(2)}
                              />
                            </MDBCardTitle>
                            <MDBCardText>
                              Some quick example text to build on the card title and make
                              up the bulk of the card&apos;s content.
                            </MDBCardText>
                            <a href="#!" className="black-text">
                              <h6 onClick={this.handleFlipping}>
                                Read more
                                <MDBIcon icon="angle-double-right" />
                              </h6>
                            </a>
                          </MDBCardBody>
                        </MDBCard>
                      </MDBRotatingCard>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>
              );
            }
          }
  
          export default FlippingCardPage;

React Flipping Cards - API

In this section you will find advanced information about the Flipping Cards component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Cards import statement

In order to use Cards make sure you have imported proper modules first.

        
            
          import { MDBCard, MDBCardBody, MDBCardImage, MDBCardUp, MDBCardTitle, MDBCardText, MDBAvatar, MDBFlippingCard } from "mdbreact";

API Reference: FlippingCard Properties

The table below shows the configuration options of the MDBFlippingCard component.

Name Type Default Description Example
className String Adds custom classes <MDBFlippingCard className="customClass" />
flipped Boolean false Flipps the Card initially <MDBFlippingCard flipped />
innerTag String div Changes the default html tag for component <MDBFlippingCard innerTag="div" />
tag String div Changes the default html tag for component's wrapper <MDBFlippingCard tag="div" />

API Reference: Card Properties

The table below shows the configuration options of the MDBCard component.

Name Type Default Description Example
border String Sets border color <MDBCard border="default" />
cascade Boolean false Switches the Card to cascade style mode <MDBCard cascade />
className String Adds custom classes <MDBCard className="customClass" />
collection Boolean false Switches on styles for collection Card <MDBCard collection />
ecommerce Boolean false Switches on styles for ecommerce Card <MDBCard ecommerce />
narrow Boolean false Makes cascading Card content body wider than header <MDBCard narrow />
news Boolean false Switches on styles for news Card <MDBCard news />
personal Boolean false Switches on styles for personal Card <MDBCard personal />
pricing Boolean false Switches on styles for pricing Card <MDBCard pricing />
reverse Boolean false Makes Card header wider and places content body on the header <MDBCard reverse />
tag String div Changes the default html tag for Card component <MDBCard tag="div" />
testimonial Boolean false Switches on styles for testimonial Card <MDBCard testimonial />
wide Boolean false Makes cascading Card header wider than content body <MDBCard wide />

API Reference: CardBody Properties

The table below shows the configuration options of the MDBCardBody component.

Name Type Default Description Example
cascade Boolean false Switches the CardBody to cascade style mode <MDBCardBody cascade />
className String Adds custom classes <MDBCardBody className="customClass" />
tag String div Changes the default html tag for CardBody component <MDBCardBody tag="div" />

API Reference: CardImage Properties

The table below shows the configuration options of the MDBCardImage component.

Name Type Default Description Example
alt String Alternative text when image does not load <MDBCardImage alt="Image" />
cascade Boolean false Switches the CardImage to cascade style mode <MDBCardImage cascade />
className String Adds custom classes <MDBCardImage className="customClass" />
hover Boolean false Switches on hover behaviour <MDBCardImage hover />
overlay String white-slight Sets the color of hover overlay <MDBCardImage overlay="white-light" />
src String URL of the image <MDBCardImage src="https://yourimage" />
tag String img Changes the default html tag for CardImage component <MDBCardImage tag="div" />
top Boolean false Makes image fluid <MDBCardImage top />
waves Boolean true Switches on waves effect <MDBCardImage waves />

API Reference: CardUp Properties

The table below shows the configuration options of the MDBCardUp component.

Name Type Default Description Example
className String Adds custom classes <MDBCardUp className="customClass" />
color String Sets background color <MDBCardUp color="indigo" />
gradient String Sets background gradient <MDBCardUp gradient="aqua" />
tag String img Changes the default html tag for CardUp component <MDBCardUp tag="div" />

API Reference: CardTitle Properties

The table below shows the configuration options of the MDBCardTitle component.

Name Type Default Description Example
className String Adds custom classes <MDBCardTitle className="customClass" />
sub Boolean false Styles title as subtitle <MDBCardTitle sub />
tag String img Changes the default html tag for component <MDBCardTitle tag="div" />

API Reference: CardText Properties

The table below shows the configuration options of the MDBCardText component.

Name Type Default Description Example
className String Adds custom classes <MDBCardText className="customClass" />
muted Boolean false Mutes the text color <MDBCardText muted />
small Boolean false Uses html small as component's tag <MDBCardText small />
tag String img Changes the default html tag for component <MDBCardText tag="div" />