Card Animations
Bootstrap Card animations
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
Bootstrap card animations is a set of standard illusions of motions that can be applied to the Bootstrap cards to improve the user experience.
Vue live previewSee the following Bootstrap animations examples:
Card with share button MDB Pro component
Click on the button to launch the animation.
<template>
<mdb-row>
<mdb-col sm="4">
<mdb-card>
<mdb-view hover>
<a href="#!">
<mdb-card-image
src="https://mdbootstrap.com/img/Photos/Others/photo9.webp"
alt="Card image cap"
></mdb-card-image>
<mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
</a>
</mdb-view>
<mdb-row class="justify-content-end mr-2 mb-4">
<transition name="social-fb-btn">
<mdb-btn v-if="show" tag="a" floating action class="btn-fb">
<mdb-icon fab icon="facebook-f" />
</mdb-btn>
</transition>
<transition name="social-tw-btn">
<mdb-btn v-if="show" tag="a" floating action class="btn-tw">
<mdb-icon fab icon="twitter" />
</mdb-btn>
</transition>
<transition name="social-gplus-btn">
<mdb-btn v-if="show" tag="a" floating action class="btn-gplus">
<mdb-icon fab icon="google-plus-g" />
</mdb-btn>
</transition>
<mdb-btn tag="a" floating action color="indigo" @click="show = !show">
<mdb-icon icon="share-alt" />
</mdb-btn>
</mdb-row>
<mdb-card-body>
<mdb-card-title>Card title</mdb-card-title>
<hr />
<p
class="font-small grey-dark-text"
>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<mdb-btn rounded color="indigo">Read more</mdb-btn>
</mdb-card-body>
</mdb-card>
</mdb-col>
</mdb-row>
</template>
<script>
import {
mdbRow,
mdbCol,
mdbCard,
mdbCardImage,
mdbCardBody,
mdbCardTitle,
mdbCardUp,
mdbBtn,
mdbView,
mdbMask,
mdbIcon,
} from "mdbvue";
export default {
name: "CardAnimationsPage",
components: {
mdbRow,
mdbCol,
mdbCard,
mdbCardImage,
mdbCardBody,
mdbCardTitle,
mdbCardUp,
mdbBtn,
mdbView,
mdbMask,
mdbIcon,
},
data() {
return {
show: false
};
}
};
</script>
<style>
.social-fb-btn-enter-active {
transition: all 0.7s ease;
}
.social-fb-btn-leave-active {
transition: all 0.3s ease;
}
.social-fb-btn-enter,
.social-fb-btn-leave-to {
transform: translateX(100px);
opacity: 0;
}
.social-tw-btn-enter-active {
transition: all 0.5s ease;
}
.social-tw-btn-leave-active {
transition: all 0.3s ease;
}
.social-tw-btn-enter,
.social-tw-btn-leave-to {
transform: translateX(70px);
opacity: 0;
}
.social-gplus-btn-enter-active {
transition: all 0.3s ease;
}
.social-gplus-btn-leave-active {
transition: all 0.3s ease;
}
.social-gplus-btn-enter,
.social-gplus-btn-leave-to {
transform: translateX(40px);
opacity: 0;
}
</style>
Card with share icon MDB Pro component
Click on the icon to launch the animation. You can customize animation by defining position to 'top', 'left', 'right'. Horizontal sliding effect requires passing to sliding-card additional parameter width to maintain card's layout through animation. See API tab for more information.
<template>
<mdb-container>
<mdb-row>
<mdb-col sm="4">
<mdb-card class="mt-5 pb-1">
<mdb-sliding-card :show="show">
<mdb-card-body>
<mdb-card-title class="text-center">
Social shares
<mdb-btn flat @click="show = !show" class="float-right p-0 m-0">
<mdb-icon icon="times" size="lg" color />
</mdb-btn>
</mdb-card-title>
<hr />
<mdb-row class="justify-content-center pt-3">
<mdb-btn tag="a" floating class="btn-dribbble">
<mdb-icon fab icon="dribbble" />
</mdb-btn>
<mdb-btn tag="a" floating class="btn-slack">
<mdb-icon fab icon="slack-hash" />
</mdb-btn>
<mdb-btn tag="a" floating class="btn-ins">
<mdb-icon fab icon="instagram" />
</mdb-btn>
<mdb-btn tag="a" floating class="btn-pin">
<mdb-icon fab icon="pinterest" />
</mdb-btn>
</mdb-row>
<mdb-row class="justify-content-center">
<mdb-btn tag="a" floating class="btn-tw">
<mdb-icon fab icon="twitter" />
</mdb-btn>
<mdb-btn tag="a" floating class="btn-gplus">
<mdb-icon fab icon="google-plus-g" />
</mdb-btn>
<mdb-btn tag="a" floating class="btn-git">
<mdb-icon fab icon="github" />
</mdb-btn>
</mdb-row>
<h5 class="text-center pt-5 pb-2">Join our community</h5>
<hr />
<mdb-row class="justify-content-center pt-4">
<mdb-btn tag="a" class="pl-4 pr-4 btn-fb">
<mdb-icon fab icon="facebook-f" />
</mdb-btn>
<mdb-btn tag="a" class="pl-4 pr-4 btn-tw">
<mdb-icon fab icon="twitter" />
</mdb-btn>
<mdb-btn tag="a" class="pl-4 pr-4 btn-li">
<mdb-icon fab icon="linkedin-in" />
</mdb-btn>
<mdb-btn tag="a" class="pl-4 pr-4 btn-ins">
<mdb-icon fab icon="instagram" />
</mdb-btn>
</mdb-row>
</mdb-card-body>
</mdb-sliding-card>
<mdb-view hover>
<a href="#!">
<mdb-card-image
src="https://mdbootstrap.com/img/Photos/Others/photo11.webp"
alt="Card image cap"
></mdb-card-image>
<mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
</a>
</mdb-view>
<mdb-card-body>
<mdb-card-title class="d-flex justify-content-between align-items-center">
Card title
<mdb-btn flat @click="show = !show" class="p-0 m-0">
<mdb-icon icon="share-alt" size="lg" />
</mdb-btn>
</mdb-card-title>
<hr />
<p
class="font-small grey-dark-text"
>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<mdb-btn class="pl-0" flat>
Read more
<mdb-icon class="pl-2" icon="angle-double-right" />
</mdb-btn>
</mdb-card-body>
</mdb-card>
</mdb-col>
</mdb-row>
</mdb-container>
</template>
<script>
import {
mdbContainer,
mdbRow,
mdbCol,
mdbCard,
mdbCardImage,
mdbCardBody,
mdbCardTitle,
mdbCardFooter,
mdbBtn,
mdbView,
mdbMask,
mdbIcon,
mdbSlidingCard
} from "mdbvue";
export default {
name: "CardAnimationsPage",
components: {
mdbContainer,
mdbRow,
mdbCol,
mdbCard,
mdbCardImage,
mdbCardBody,
mdbCardTitle,
mdbCardFooter,
mdbBtn,
mdbView,
mdbMask,
mdbIcon,
mdbSlidingCard
},
data() {
return {
show: false
};
}
};
</script>
Rotating card - version 1 MDB Pro component
Click on the icon to launch the animation.
<template>
<mdb-container>
<mdb-flipping-card
:flipped="flipped"
innerClass="text-center h-100 w-100"
style="max-width: 22rem; height: 465px;"
>
<mdb-card class="face front">
<mdb-view hover>
<a href="#!">
<mdb-card-image
src="https://mdbootstrap.com/img/Photos/Others/photo5.webp"
alt="Card image cap"
></mdb-card-image>
<mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
</a>
</mdb-view>
<mdb-card-body>
<mdb-card-title class="pl-5">
Card title
<mdb-btn class="float-right pb-5" style="bottom: 10px" flat @click="flipped=true">
<mdb-icon size="lg" class="black-text" icon="share-alt" />
</mdb-btn>
</mdb-card-title>
<hr />
<p
class="font-small grey-dark-text"
>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<mdb-btn flat>
Read more
<mdb-icon class="pl-2" icon="angle-double-right" />
</mdb-btn>
</mdb-card-body>
</mdb-card>
<mdb-card class="face back" style="height: 465px;">
<mdb-card-body>
<mdb-card-title class="pl-5">
Social shares
<mdb-btn style="bottom: 10px" flat @click="flipped=false">
<mdb-icon size="lg" icon="times" />
</mdb-btn>
</mdb-card-title>
<hr />
<mdb-row class="justify-content-center pt-3">
<mdb-btn tag="a" floating class="btn-dribbble">
<mdb-icon fab icon="dribbble" />
</mdb-btn>
<mdb-btn tag="a" floating class="btn-slack">
<mdb-icon fab icon="slack-hash" />
</mdb-btn>
<mdb-btn tag="a" floating class="btn-ins">
<mdb-icon fab icon="instagram" />
</mdb-btn>
<mdb-btn tag="a" floating class="btn-pin">
<mdb-icon fab icon="pinterest" />
</mdb-btn>
</mdb-row>
<mdb-row class="justify-content-center">
<mdb-btn tag="a" floating class="btn-tw">
<mdb-icon fab icon="twitter" />
</mdb-btn>
<mdb-btn tag="a" floating class="btn-gplus">
<mdb-icon fab icon="google-plus-g" />
</mdb-btn>
<mdb-btn tag="a" floating class="btn-git">
<mdb-icon fab icon="github" />
</mdb-btn>
</mdb-row>
<h5 class="text-center pt-5 pb-2">Join our community</h5>
<hr />
<mdb-row class="justify-content-center pt-4">
<mdb-btn tag="a" class="pl-4 pr-4 btn-fb">
<mdb-icon fab icon="facebook-f" />
</mdb-btn>
<mdb-btn tag="a" class="pl-4 pr-4 btn-tw">
<mdb-icon fab icon="twitter" />
</mdb-btn>
<mdb-btn tag="a" class="pl-4 pr-4 btn-li">
<mdb-icon fab icon="linkedin-in" />
</mdb-btn>
<mdb-btn tag="a" class="pl-4 pr-4 btn-ins">
<mdb-icon fab icon="instagram" />
</mdb-btn>
</mdb-row>
</mdb-card-body>
</mdb-card>
</mdb-flipping-card>
</mdb-container>
</template>
<script>
import {
mdbContainer,
mdbRow,
mdbCol,
mdbCard,
mdbCardImage,
mdbCardBody,
mdbCardTitle,
mdbCardUp,
mdbCardAvatar,
mdbBtn,
mdbView,
mdbMask,
mdbIcon,
mdbFlippingCard,
mdbAvatar
} from "mdbvue";
export default {
name: "CardAnimationsPage",
components: {
mdbContainer,
mdbRow,
mdbCol,
mdbCard,
mdbCardImage,
mdbCardBody,
mdbCardTitle,
mdbCardUp,
mdbCardAvatar,
mdbBtn,
mdbView,
mdbMask,
mdbIcon,
mdbFlippingCard,
mdbAvatar
},
data() {
return {
flipped: false
};
}
};
</script>
Rotating card - version 2 MDB Pro component
Click to rotate.
.webp)
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
<template>
<mdb-container>
<mdb-flipping-card
:flipped="flipped"
innerClass="text-center h-100 w-100"
style="max-width: 22rem; height: 416px;"
>
<mdb-card class="face front" style="height: 416px;">
<mdb-card-up>
<img
class="card-image-top"
src="https://mdbootstrap.com/img/Photos/Others/photo7.webp"
alt="a photo of a house facade"
/>
</mdb-card-up>
<mdb-avatar class="mx-auto white" circle>
<img
src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).webp"
class="rounded-circle"
/>
</mdb-avatar>
<mdb-card-body>
<h4 class="font-weight-bold mb-3">Marie Johnson</h4>
<p class="font-weight-bold blue-text">Web developer</p>
<a class="rotate-btn" @click="flipped=true">
<mdb-icon class="pr-2" icon="redo" />Click here to rotate
</a>
</mdb-card-body>
</mdb-card>
<mdb-card class="face back" style="height: 416px;">
<mdb-card-body>
<h4 class="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 class="list-inline py-2">
<li class="list-inline-item">
<a class="p-2 fa-lg fb-ic">
<mdb-icon fab icon="facebook" />
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg tw-ic">
<mdb-icon fab icon="twitter" />
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg gplus-ic">
<mdb-icon fab icon="google-plus" />
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg li-ic">
<mdb-icon fab icon="linkedin" />
</a>
</li>
</ul>
<a class="rotate-btn" @click="flipped=false">
<mdb-icon class="pr-2" icon="undo" />Click here to rotate back
</a>
</mdb-card-body>
</mdb-card>
</mdb-flipping-card>
</mdb-container>
</template>
<script>
import {
mdbContainer,
mdbRow,
mdbCol,
mdbCard,
mdbCardImage,
mdbCardBody,
mdbCardTitle,
mdbCardUp,
mdbCardAvatar,
mdbBtn,
mdbView,
mdbMask,
mdbIcon,
mdbFlippingCard,
mdbAvatar,
} from "mdbvue";
export default {
name: "CardAnimationsPage",
components: {
mdbContainer,
mdbRow,
mdbCol,
mdbCard,
mdbCardImage,
mdbCardBody,
mdbCardTitle,
mdbCardUp,
mdbCardAvatar,
mdbBtn,
mdbView,
mdbMask,
mdbIcon,
mdbFlippingCard,
mdbAvatar,
},
data() {
return {
flipped: false
};
}
};
</script>
Card Animation - API
In this section you will find advanced information about the FlippingCard and SlidingCard components. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.
Flipping Card
Bootstrap flipping card is a card animation that gives an element effect of
flipping to the other side upon the interaction. The Vue component is in
fact a wrapper taking in two cards (holding
face front
and face back classes) and a flipped boolean prop
responsible for rendering either side. This way you can apply your own
flip-firing logic wherever you like.
API Reference: Properties
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
tag
|
String | 'div' |
Sets a tag of an element's wrapper |
<mdb-flipping-card tag="li"/>
|
innerTag
|
String | 'div' |
Sets element's tag |
<mdb-flipping-card innerTag="li"/>
|
flipped
|
Boolean | false |
Cotrols which side of the card is showing |
<mdb-flipping-card :flipped="isFlipped"/>
|
innerClass
|
String, Array | '' |
Binds class names to inner element |
<mdb-flipping-card innerClass="custom-inner-class"/>
|
outerClass
|
String, Array | '' |
Binds class names to outer element |
<mdb-flipping-card outerClass="custom-outer-class"/>
|
Sliding Card
API Reference: Properties
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
show
|
Boolean | false |
Controls display of an element |
<mdb-sliding-card :show="isShown"/>
|
direction
|
String | "bottom" |
Sets direction of the animation - available options are: top, bottom, left, right |
<mdb-sliding-card direction="top"/>
|
width
|
Number | |
If we're using horizontal animation (direction="left" or direction="right") we
need to add width property with value in pixels in order to prevent content from wrapping. |
<mdb-sliding-card direction="left" :width="220" />
|