Animated CSS Flip Boxes - Bootstrap Responsive

Pure CSS Animated Flip Box

Created: Sep-2018
By: Hi-Tech Parks
Email: hitechparks@gmail.com

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

Animated CSS Flip Boxes - Bootstrap Responsive Features:

Unlimited Flip Boxs.
Hover Flip Effect.
Different Flip Box Layouts.
Flat Animation Flip Box.
Elastic Animation Flip Box.
Rolling Animation Flip Box.
Shake Animation Flip Box.
3D Animation Flip Box.
Images Flip Boxes.
Content Flip Boxes.
Video Flip Boxes.
Auto Height Flip Box.
Clean Design And Commented Code.
Fully Responsive.
Made With Bootstrap v4 & v3
Vertical & Horizontal Flip.
Cross-Browser Compatibility.
Uses Font Awesome Icon.
Easy to Customize.
Easy to Setup.
Step by Step Documentation.
And Much More!

Browser compatibility:

Animated CSS Flip Boxes - Bootstrap Responsive will run in on all modern browsers. However you need JavaScript enabled to run the script smooth.

Installation

Installation Animated CSS Flip Boxes - Bootstrap Responsive

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 Boxes).

-----

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 Animation effect, Icon or etcetera then flow this instruction carefully...

Step 01 - Change Flip Box Animation: If you need to change the flip box Animation then you have to just change the CSS class name!! Do it very simply, like as class="flip-boxes-style-3D" for make it 3D Animated. Our template other Animation name are there
( .flip-boxes-style-classic-right, .flip-boxes-style-classic-up, .flip-boxes-style-shake-right, .flip-boxes-style-shake-up, .flip-boxes-style-elastic-up, .flip-boxes-style-elastic-right, .flip-boxes-style-rolling, .flip-boxes-style-3D ).
Replace the name and make it awesome!!!

Step 02 - Change Flip Box Images: If you need to change the Flip Images then you have to just change the image URL location!! Do it very simply, like as src="assets2/customs/img/1.jpg"

Step 03 - Change Flip Box Videos: If you need to change the Flip Videos then you have to just change the video URL location!! Do it very simply, like as src="https://www.youtube.com/embed/UouwabEZy2E" for Youtube videos.

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

Step 05 - Add or Remove Flip Boxes: If you need to Add or Remove some Flips then you have to do copy and paste those code. it's very simply.

Step 06 - Change Flip Box Icon: If you need to change the Box 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 box area.

-----

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

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

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

How To Use

01. Mouse-over Front side of the flip for see Back side content

02. Mouse-leave on Back side of the flip for see Front side content

Update