Flip Box - Bootstrap Flipping Card

Unlimited Flips - Flip Box


Thank you for Browsing our website. If you have any questions that are beyond the scope of this help file please feel free to contact with us at Hi-Tech Parks. Thanks again for Browsing our website!

Explanation


Flip Box - Bootstrap Flipping Card Features:

  1. Unlimited Flip Boxs.
  2. Hover Flip Effect.
  3. Click Flip Effect.
  4. 12 Flip Box Layouts.
  5. 4 Colors Flip Card.
  6. Features Flip Box.
  7. Blogs Flip Box.
  8. Profile Flip Box.
  9. Images Flip Box.
  10. Information Flip Box.
  11. Events Flip Box.
  12. Question / Answer Flip Box.
  13. Social Flip Boxs.
  14. Auto Height Flip Box.
  15. Clean Design And Commented Code.
  16. Fully Responsive.
  17. Made With Bootstrap
  18. Vertical & Horizontal Flip.
  19. Cross-Browser Compatibility.
  20. Uses Font Awesome Icon.
  21. Easy to Customize.
  22. Easy to Setup.
  23. Step by Step Documentation.
  24. And Much More!

Browser compatibility:

img

Flip Box - Bootstrap Flipping Card will run in on all modern browsers. However you need JavaScript enabled to run the script smooth.

Installation


Installation Flip Box - Bootstrap Flipping Card

Please follow all the steps carefully...

  • Step 1: Download the Zip file which you have purchased.
  • Step 2: Extract the zip file.
  • Step 3: Copy all plugin CSS, JS and fonts files (you can find that's inside of customs and plugins folders inside of assets), and paste it your own website css, js and fonts folder.
  • Step 4: Link all plugin css file in your own web page head section and js file in your own web page before end of the body section (whose template page you want to add this Flip Boxs).

  • -----



  • Step 5: Choice your Flip template .html file, whose Layout you wont to use.
  • Step 6: Edit this HTML file in Notepad / Notepad++ (you can use another code editor).
  • Step 7: Copy the Flip content from Flip template and paste it where you need to show this in your website template body.
    (That's commented inside of the template you can find it easily.)



  • Step 8: Save your own website template. It's done!

Note: After setup check your template, If your design broken then please rename or delete your plugin css class, whose class was broken your design.

Customization


If you wont to customize this flip boxs effect, icon or etcetera then flow this instruction carefully...

  • Step 01 - Change Flip Box Color: If you need to change the flip card color then you have to just change the CSS file name!! Do it very simply, like as "flip-red.css" for make it red color (You can find this css file name link inside the head section). Our template other colors name are there
    ( black, blue, red, green ). Replace the name and make it awesome!!!


  • Step 02 - Change Flip Effect: If you need to change the Flip effect (vertical flip to horizontal flip or horizontal flip to vertical flip) then you have to just change the css id name!! Do it very simply, like as id="horizontal-1" for horizontal 3D flip effect and id="vertical-1" for vertical 3D flip effect.



  • Step 03 - Change Flip Layout: If you need to change the Flip Layout (square flip to rounded flip or rounded flip to circle flip) then you have to just change the css class name!! Do it very simply, like as class="square" for made it square layout flip card.
    (you can use anyone class form there .square, .rounded, .circle)



  • Step 04 - Hover or Click Events: If you need to change the Flip Events (hover to click or click to hover) then you have to just change the js trigger value on your flip.js file!! Edit this flip.js file and do it very simply, like as trigger: 'hover'" for made it hover event flip card.
    (you can use anyone value form there hover, click)


  • (You can find this flip.js file inside of assets/customs/js folder.)

  • Step 05 - Background Image: If you need to use background image on the flip card then you have to just add a css class!! Do it very simply, like as class="bg-image". Then eidt the flip.css file and replace the image path (on line number 145) for made it yourself

  • -----


    (You can find this flip.css file inside of assets/customs/css folder.)

  • Step 06 - Front-Back Side: You should be use css .front class for made front-side of the flip and use css .back class for made back-side of the flip. All of content of the flip must have inside of the front or back div



  • Step 07 - Add or Remove Flip Cards: If you need to Add or Remove some Flips then you have to do it very simply.

    A. Add or Remove some "flip-card" content inside of bootstrap column (This content should be inside of the class "flip-card").



    B. Formatting the every flip card item by the id name like as #vertical-1,#vertical-2,#vertical-3. Ex: id="vertical-1" or id="horizontal-1" for first flip card.
    (Same name of flip id can't work in another flip, Every flip id name must be difference. You can use here id no 1 to 40)




  • Step 08 - Formatting Flip Cards: Formatting the every flip card item by the id name like as #vertical-1,#vertical-2,#vertical-3. Ex: id="vertical-1" or id="horizontal-1" for first flip card.
    (Same name of flip id can't work in another flip, Every flip id name must be difference. You can use here id no 1 to 40)



  • Step 09 - Change Flip Card Icon: If you need to change the Card Icon then you have to use Font Awesome Library. Do it very simply for make it awesome!!!

    A. Go to the Font Awesome Library and find the icon that you need.





    B. Click over the icon and get the iconic code below the sambol.

    C. Just copy this code and paste it inside the flip card area.

    -----


    (NB: If you don't this icon, You can Remove the icon code form there)


  • Step 10 - Change Flip Card Content: If you need to change the card Content then you have to use Bootstrap Framework or your own HTML code!! Do it very simply for make it awesome!!!


  • Step 11: Now save it. Let's go It's ready to use!


How To Use


01. Mouse-over Front side of the flips for see Back side content (For hover event)



02. Click on Front side of the flips for see Back side content (For click event)



03. Click on Back side of the flips for see Front side content (For click event)


Update


Flip Box - Bootstrap Flipping Card v1.0.0


Version 1.1.0 – 12 June 2017
- CSS issue solved.
Version 1.0.0 – 08 June 2017
- Initial release.

Support


With browsing Flip Box - Bootstrap Flipping Card you will get first class support! Please feel free to contact with us by email at any time if you run into problems.

Email Us: hitechparks@gmail.com

You need to confirm your purchase from codecanyon.net to get any support.

Credits


Credit Goes to...

  1. Bootstrap
  2. Font Awesome
  3. jQuary