Bootstrap 4 Flip Card on Click with jQuery JustFlipIt

The “JustFlipIt” is an ultra lightweight jQuery plugin that flip any HTML element. It uses CSS3 transformation to flip DOM elements. It also works with Bootstrap 4 to flip card on click event.

Moreover, the plugin allow you to create backside of the card dynamically. All elements of the plugin can be customized with CSS.

Plugin Overview

Plugin: justFlipIt
Author: SimHub
Licence: MIT Licence
Published: January 20, 2024
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version, Bootstrap 4.1.3 , Semantic UI and Retina Js
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 906 KB

How to Use Bootstrap 4 Flip Card Plugin

1. First of all load the all necessary assets like Bootstrap 4 framework, jQuery JavaScript library and Retina JS into your HTML webpage.

<!-- Bootstrap CSS -->
<link href="">

<!-- Bootstrap JS -->
<script src=""></script>

<!-- jQuery -->
<script src=""></script>

<!-- Retina Js -->
<script src=""></script>

2. Now, also load Semantic UI CSS for card layout into your project.

<!-- Semantic ui -->
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="">

3. After that, create a basic card (div element) that will contain an image to be flipped. You may add any HTML element.

<div class="flipWrapperImg">
  <div class="click">
   <div class="ui card" style="margin: 0 auto">
    <div class="image ">
     <img src="img/jenny.jpg" />

4. Finally, initialize the plugin with following script.

  $(function() {
        setTimeout(() => {
            Click: true,
            Style: [{el: 'self', style: {margin: '0 auto', cursor: 'pointer'}}],
              '<div class="ui card" style="margin: 0 auto">\n' +
              '      <div class="image ">\n' +
              '              <img src="img/stevie.jpg">' +
              '      </div>\n' +
              '                <div class="extra content" style="position: absolute;' +
              '                                                  background: black;' +
              '                                                  width: 100%;' +
              '                                                  top: 250px;">' +
              '                   <div style="color:white;text-align:center">$("[elementName]").justFlipIt(); </div>' +
              '                    </div>\n' +
              '                </div>\n' +
              '  </div> <br>',

Advance Configuration Options for Bootstrap Flip Card

The following are some advance configuration options to create / customize “Bootstrap 4 flip card on click”.

Option Description, Default, Type

It define the axis that you want to rotate around. Default: false, Type: Boolean.

   FlipX: true,

You can specify a element for the click event. Default: false, Type: Boolean | Object.


This option is useful to define the backside of the card. Default: ”, Type: String | Object.

   < h1>HELLO WORLD!< /h1>'

It define the custom CSS styles for card/plugin. Default: [], Type: Array of Objects.


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link