Bootstrap/ Animated Responsive Pricing Table Documentation

### “Bootstrap / None-Bootstrap Animated Responsive Pricing Table” Documentation by “Shy Design” v1.4

# “Bootstrap / None-Bootstrap Animated Responsive Pricing Table” V. 1.4

Created: 10/07/2012
updated: 11/18/2012
By: Shy Design

Thank you for purchasing my form. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

## Table of Contents

1. HTML Structure
2. CSS Files and Structure

### A) HTML Structure - top

All of the information within the main content area is nested within a div with an class of "container".

Responsivity of the pricing table is based on the skeleton template.

#### HTML Structure

    <div class="container"> <!-- the main container -->

    	<div id="pricing_table_1"> <!-- pricing table id is the same in all index files -->

    		<div class="four columns"> <!-- I designed a four-column table, but you can add more columns as it meets your needs. It is important to note that there are SIXTEEN COLUMNS. -->

    			<div class="plan plan1"> <!-- section of every pricing table -->

    				<div class="header"> <!-- the top part of the the pricing table, includes plan name, description,  -->

    					<p>Enterprise</p> <!-- plan name -->

    					<span>Great for small business</span> <!-- description -->

    				</div>

    					<div class="duration"> <!-- the middle part of the pricing table, Price and month section. It mostly includes: price and month -->

    						<div class="price"><span>$</span>59</div> <!-- price -->

    						<div class="monthly">per month</div> <!-- month -->

    						<a class="signup_1" href="">Join</a> <!-- join button, conside that the place of this button varies from index to index -->

    					</div>

    				<div class="speci"> <!-- bottom part of the pricing table, it includes the specifications -->

    					<ul>

    						<li>24/7 Tech Support</li> <!-- specifications 1 -->

    						<li>Advanced Options</li> <!-- specifications 2 -->

    						<li>10GB Disk Space</li> <!-- specifications 3 -->

    						<li>90GB Monthly Bandwidth</li> <!-- specifications 4 -->

    						<li>20 Email Accounts</li> <!-- specifications 5 -->

    						<li>Unlimited subdomains</li> <!-- specifications 6 -->

    					</ul>

    				</div>

    			</div>

    		</div>

    	</div>

    </div>

### B) CSS Files and Structure - top

#### Color Variations:

####

- Blue
- Dark
- Green
- Light
- Purple
- Red
- Yellow

#### CSS Files

####

- style_1
- style_2
- style_3
- ie_1
- ie_2
- ie_3

#### CSS Structures

    	/* Css Reset --------------------------------------------- */
    		{ Styles }
    	/* Basic Styles ------------------------------------------ */
    		{ Styles }
    	/* Links ------------------------------------------------- */
    		{ Styles }
    	/* Misc -------------------------------------------------- */
    		{ Styles }
    	/* Header ------------------------------------------------ */
    		{ Styles }
    	/* Pricing Table ----------------------------------------- */
    		{ Styles }
    		/* Top Section ----------------------------------------------- */
    			{ Styles }
    		/* Middle Section -------------------------------------------- */
    			{ Styles }
    		/* Bottom Section -------------------------------------------- */
    			{ Styles }
    	/* Footer ------------------------------------------------ */
    			{ Styles }
    	/* Media Queries ----------------------------------------- */
    			{ Styles }
    	/* Font Face --------------------------------------------- */
    			{ Styles }

Note 1: All the box-shadow, border-radius, transition, ... are provided withe proper prefixes in order to make the pricing table cross-browser.

Note 2: When I was trying to make the pricing table responsive, I faced some bugs for smaller screens. I fixed them through different media sizes which are provided at the end of the every css style file.

Note 3: No image has been used. all the icons are are powered by font-face.

Once again, thank you so much for purchasing this Form. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Shy Design

Go To Table of Contents