Bootstrap 4 Flip Card on Click with jQuery JustFlipIt

Plugin Preview

Share this:

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”.

$('[elementName]').justFlipIt({
   FlipX: true,
});

$('[elementName]').justFlipIt({
    Click:'[elementName]',
});

$('[elementName]').justFlipIt({
   < h1>HELLO WORLD!< /h1>'
});

$('[elementName]').justFlipIt({
   Style:[
{el:'[elementName1]',style:{'property':'value'}},
{el:'[elementName2]',style:{'property':'value'}},
...
]; 
});

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.