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 Preview

Bootstrap 4 Flip Card on Click with jQuery JustFlipIt

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

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

Demo Download

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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Retina Js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/retina.js/2.1.3/retina.min.js"></script>

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

<!-- Semantic ui -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/components/table.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/button.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/components/card.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/components/label.min.css">

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" />
    </div>
   </div>
  </div>
</div>

4. Finally, initialize the plugin with following script.

  $(function() {
        setTimeout(() => {
          $('.click').justFlipIt({
            Click: true,
            Style: [{el: 'self', style: {margin: '0 auto', cursor: 'pointer'}}],
            Template:
              '<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
`FlipX`	It define the axis that you want to rotate around. Default: false, Type: Boolean. EXAMPLE $('[elementName]').justFlipIt({ FlipX: true, });
`Click`	You can specify a element for the click event. Default: false, Type: Boolean \| Object. EXAMPLE $('[elementName]').justFlipIt({ Click:'[elementName]', });
`Template`	This option is useful to define the backside of the card. Default: ”, Type: String \| Object. EXAMPLE $('[elementName]').justFlipIt({ < h1>HELLO WORLD!< /h1>' });
`Style`	It define the custom CSS styles for card/plugin. Default: [], Type: Array of Objects. EXAMPLE $('[elementName]').justFlipIt({ Style:[ {el:'[elementName1]',style:{'property':'value'}}, {el:'[elementName2]',style:{'property':'value'}}, ... ]; });

Similar Code Snippets:

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.

Plugin Preview

Plugin Overview

How to Use Bootstrap 4 Flip Card Plugin

Advance Configuration Options for Bootstrap Flip Card

Similar Code Snippets:

Leave a Comment Cancel reply