Col Title Here

$XX
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
Pro Column Title

Col Title Here

$XX
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE

Col Title Here

$XX
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE

Col Title Here

$XX
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE
  • LINE_ITEM_HERE

Explanation of styles/classes for price tables

COLUMNS

Columns are responsive, but not limitless. Recommended number of price columns for this application is <= 4.

IDS

#price_table (id="price_table"): The price table must have this ID. Under normal conditions, there should only be one price table per page. ID's are reserved for sections use once on a page. Classes are for multiple usage. Adding the ID will prevent any possible conflict with classes of the same name in other parts of the site.

CLASSES

.pro: The .pro class will move the column up 30px from the other columns. It also adds a teal stripe at the bottom of the column.

shadows

.is-l: adds an inset shadow to the left side of column

.is-r: adds an inset shadow to the right side of column

.is-x: adds an inset shadow to the left and right sides of column

.os-l: adds a drop shadow to the left side of column

.os-r: adds a drop shadow to the right side of column

.os-x: adds a drop shadow to the left and right sides of column

borders

borders are important to separating columns. adding ".border" to the chart_inner div will add a simple light grey border, with no radii on the corners.

additionally, for taller columns, we need to make sure the bottom corners are radiused correctly.

.border: adds a nice border to the columns

.border-left-1: if you just want a left border

.border-right-1: if you just want a right border

.border-left-0: if you want to remove the left border, use in conjuction with .border

.border-right-0: if you want to remove the right border, use in conjuction with .border

.border-bottom-left-radius-1: adds a nice radius to the bottom left corner of the column, used for the first column in the table

.border-bottom-right-radius-1: adds a nice radius to the bottom right corner of the column, used for the last column in the table

.border-left-radius-1: add a nice radius to the left top and bottom corners of a column. great for those long fist columns.

.border-right-radius-1: add a nice radius to the rihgt top and bottom corners of a column. great for those long last columns.

.border-x-0: removes the left and right borders from a column

.border-x-1: removes the top and bottom borders from a column, keeps the left and right

.border-x-1: removes the left and right borders from a column, keeps the top and bottom

background colors

.bluebg

.yellowbg

.tealbg

text colors

.blue

.yellow

.teal

check list

the unordered list (ul) class for check marks is .checked

divider class

adding the class "divider" to an element will put a bottom border on the element. for use as a divider, the element should remain empty



	
<div id="price_table" class="container my-5">
	<div class="row justify-content-center">
		<div class="col-xl-11 col-lg-11">
			<div class="row mx-auto">
			<!-- DO NOT EDIT ABOVE THIS LINE -->
			<!-- price chart column -->
				<div class="col chart_wrapper">
					<div class="chart_inner border border-right-0 is-r">
						<h3>Col Title Here</h3>
						<span class="price blue">$XX</span>
						<button type="button" class="btn btn-primary">Button Text</button>
						<span class="divider"></span>
						<ul class="checked">
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li class="divider"></li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
						</ul>
					</div>
				</div>
			<!-- end price chart column -->

			<!-- price chart column -->
				<div class="col chart_wrapper pro">
					<div class="chart_inner border">
						<span class="pro-title">Pro Column Title</span>
						<h3>Col Title Here</h3>
						<span class="price blue">$XX</span>
						<button type="button" class="btn btn-primary">Button Text</button>
						<span class="divider"></span>
						<ul class="checked">
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li class="divider"></li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
						</ul>
						<span class="divider"></span>
						<button type="button" class="btn btn-primary">Button Text</button>
					</div>
				</div>
			<!-- end price chart column -->

			<!-- price chart column -->
				<div class="col chart_wrapper">
					<div class="chart_inner border border-x-0 is-l">
						<h3>Col Title Here</h3>
						<span class="price blue">$XX</span>
						<button type="button" class="btn btn-primary">Button Text</button>
						<span class="divider"></span>
						<ul class="checked">
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li class="divider"></li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
						</ul>
						<span class="divider"></span>
						<button type="button" class="btn btn-primary">Button Text</button>
					</div>
				</div>
			<!-- end price chart column -->

			<!-- price chart column -->
				<div class="col chart_wrapper">
					<div class="chart_inner border border-bottom-left-radius-1 border-bottom-right-radius-1 os-x">
						<h3>Col Title Here</h3>
						<span class="price blue">$XX</span>
						<button type="button" class="btn btn-primary">Button Text</button>
						<span class="divider"></span>
						<ul class="checked">
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li class="divider"></li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li class="divider"></li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
							<li><span></span>LINE_ITEM_HERE</li>
						</ul>
						<span class="divider"></span>
						<button type="button" class="btn btn-primary">Button Text</button>
					</div>
				</div>
			<!-- end price chart column -->
			<!-- DO NOT EDIT BELOW THIS LINE -->
			</div>
		</div>
	</div>
</div><!--end #pricing table -->

Product Comparison Table

Brand Bariatric Choice® Bariatric Advantage® Bariatric Fusion® Celebrate®
Product Name: ONCE DAILY MultiVitamin EA MultiVitamin MultiVitamin Capsules Multi-Complete 36
Size: 90 Capsule Bottle 60 Tablet Bottle 60 Capsule Bottle 90 Capsule Bottle
Price: $29.95 $37.45 $18.99 $19.95
Monthly Cost
(30 Days):

$9.98/mo

$37.45/mo

$18.99/mo

$19.95/mo

Serving Size: 1 Capsule Per Day 2 Capsules Per Day 2 Capsules Per Day 3 Capsules Per Day
Per Serving / DV Per Serving Per Serving Per Serving
Vitamin A (mcg) 3,000 mcg (10,000 IU) / 333% 10,000 IU 7,500 IU 10,000 IU
Vitamin C (mg) 130 mg / 144% 90 mg 180 mg 180 mg
Vitamin D (mcg) 75 mcg (3,000 IU) / 375% 3,000 IU 3,000 IU 3,000 IU
Vitamin E (mg) 40.2 mg (60 IU) / 268% 150 IU 30 IU 60 IU
Vitamin K (mcg) 120 mcg(60 IU) / 100% 300 mcg 0 mcg 120 mcg IU
Vitamin K (mcg) 120 mcg(60 IU) / 100% 300 mcg 0 mcg 120 mcg IU
Thiamin (mg) 20 mg / 1667% 12.5 mg 12 mg 12 mg
Riboflavin (mg) 12 mg / 923% 3.4 mg 1.7 mg 12 mg
Niacin (mg) 40 mg / 250% 20 mg 20 mg 40 mg
Vitamin B6 (mg) 12 mg / 706% 4 mg 2 mg 4 mg
Folate (mcg) 1,333 mcg / 333% 800 mcg 800 mcg 800 mcg
Vitamin B12 (mcg) 1,000 mcg / 41,667% 1,000 mcg 560 mcg 500 mcg
Biotin (mcg) 600 mcg / 2,000% 600 mcg 600 mcg 600 mcg
Pantothenic acid (mcg) 20 mcg / 400% 20 mcg 10 mcg 20 mcg
Calcium (mg) 0 mg / 0% 150 mg 200 mg 0 mg
Iron (mg) 45 mg / 250% 45 mg 0 mg 36 mg
Iodine (mcg) 150 mcg / 100% 150 mcg 150 mcg 150 mcg
Magnesium (mg) 100 mg / 24% 50 mg 100 mg 100 mg
Zinc (mg) 15 mg / 136% 15 mg 30 mg 30 mg
Selenium (mcg) 100 mcg / 136% 70 mcg 70 mcg 140 mcg
Copper (mg) 2 mg / 222% 2 mg 2 mg 3 mg
Manganese (mg) 2 mg / 87% 2 mg 2 mg 2 mg
Chromium (mcg) 100 mcg / 286% 120 mcg 120 mcg 200 mcg
Molybdenum (mcg) 75 mcg / 167% 50 mcg 75 mcg 75 mcg


Explanation of styles/classes for comparison tables

IDS

#comparison_table (id="comparison_table"): The comparison table must have this ID. Under normal conditions, there should only be one price table per page. ID's are reserved for sections use once on a page. Classes are for multiple usage. Adding the ID will prevent any possible conflict with classes of the same name in other parts of the site.

CLASSES

.highlight_row: The .highlight_row class will give the row a light blue background.

Highlighted column: This is set as the first product column. This is currently not editable.

H3: This tag makes the content of the table cells larger and will be centered. See the current .highlight_row in the example.



	
<div id="comparison_table" class="container">
		<table class="table-responsive table w-75 mx-auto">
				<thead>
			    	<tr>
			      		<th></th>
			      		
			      		<th class="border-0"><img src="https://www.bariatricchoice.com/media/wysiwyg/bc900/BC900-090.png" alt="" class="px-3"></th>
			      		<th><img src="https://www.bariatricchoice.com/media/wysiwyg/bc900/BA-Advanced-Multi-EA.png" alt="" class="px-3"></th>
			      		<th><img src="https://www.bariatricchoice.com/media/wysiwyg/bc900/BF-Multi-Capsule.png" alt="" class="px-3"></th>
			      		<th><img src="https://www.bariatricchoice.com/media/wysiwyg/bc900/Celebrate-Multi-Complete-36.png" alt="" class="px-3"></th>
			    	</tr>
			    	<tr>
			      		<th class="font-weight-bold">Brand</th>
			      		
			      		<th class="font-weight-bold border-0">Bariatric Choice<sup>®</sup></th>
			      		<th class="font-weight-bold">Bariatric Advantage<sup>®</sup></th>
			      		<th class="font-weight-bold">Bariatric Fusion<sup>®</sup></th>
			      		<th class="font-weight-bold">Celebrate<sup>®</sup></th>
			    	</tr>
			  	</thead>
			  	<tbody>
	 
				    <tr>
				 
				      <th scope="row">Product Name:</th>
				 		
				 		<td>ONCE DAILY MultiVitamin</td>
				 		<td>EA MultiVitamin</td>
				 		<td>MultiVitamin Capsules</td>
				 		<td>Multi-Complete 36</td>
				 
				    </tr>
				 
				    <tr>
				 
				      <th scope="row">Size:</th>
				 		
				 		<td>90 Capsule Bottle</td>
				 		<td>60 Tablet Bottle</td>
				 		<td>60 Capsule Bottle</td>
				 		<td>90 Capsule Bottle</td>
				 
				    </tr>
				 
				    <tr>
				 
				      <th scope="row">Price:</th>
				 		
				 		<td>$29.95</td>
				 		<td>$37.45</td>
				 		<td>$18.99</td>
				 		<td>$19.95</td>
				 
				    </tr>
				 
				    <tr class="highlight_row">
				 
				      <th scope="row"><strong class="text-nowrap">Monthly Cost</strong><br><strong class="text-nowrap">(30 Days):</strong></th>
				 		
				 		<td><h3 class="my-auto p-3 text-center">$9.98<small>/mo</small></h3></td>
				 		<td><h3 class="my-auto p-3 text-center">$37.45<small>/mo</small></h3></td>
				 		<td><h3 class="my-auto p-3 text-center">$18.99<small>/mo</small></h3></td>
				 		<td><h3 class="my-auto p-3 text-center">$19.95<small>/mo</small></h3></td>
				 
				    </tr>
				 
				    <tr>
				 
				      <th scope="row">Serving Size:</th>
				 		
				 		<td><em>1 Capsule Per Day</em></td>
				 		<td><em>2 Capsules Per Day</em></td>
				 		<td><em>2 Capsules Per Day</em></td>
				 		<td><em>3 Capsules Per Day</em></td>
				 
				    </tr>
				 
				    <tr>
				 
				      <th scope="row"></th>
				 		
				 		<td><strong>Per Serving / DV</strong></td>
				 		<td><strong>Per Serving</strong></td>
				 		<td><strong>Per Serving</strong></td>
				 		<td><strong>Per Serving</strong></td>
				 
				    </tr>

				    <tr class="small">
				 
				      <th scope="row">Vitamin A (mcg)</th>
				 		
				 		<td>3,000 mcg (10,000 IU) / 333%</td>
				 		<td>10,000 IU</td>
				 		<td>7,500 IU</td>
				 		<td>10,000 IU</td>
				 
				    </tr>

				    <tr class="small">
				 
				      <th scope="row">Vitamin C (mg)</th>
				 		
				 		<td>130 mg / 144%</td>
				 		<td>90 mg</td>
				 		<td>180 mg</td>
				 		<td>180 mg</td>
				 
				    </tr>

				    <tr class="small">
				 
				      <th scope="row">Vitamin D (mcg)</th>
				 		
				 		<td>75 mcg (3,000 IU) / 375%</td>
				 		<td>3,000 IU</td>
				 		<td>3,000 IU</td>
				 		<td>3,000 IU</td>
				 
				    </tr>

				    <tr class="small">
				 
				      <th scope="row">Vitamin E (mg)</th>
				 		
				 		<td>40.2 mg (60 IU) / 268%</td>
				 		<td>150 IU</td>
				 		<td>30 IU</td>
				 		<td>60 IU</td>
				 
				    </tr>        

				    <tr class="small">
				 
				      <th scope="row">Vitamin K (mcg)</th>
				 		
				 		<td>120 mcg(60 IU) / 100%</td>
				 		<td>300 mcg</td>
				 		<td>0 mcg</td>
				 		<td>120 mcg IU</td>
				 
				    </tr>      

				    <tr class="small">
				 
				      <th scope="row">Vitamin K (mcg)</th>
				 		
				 		<td>120 mcg(60 IU) / 100%</td>
				 		<td>300 mcg</td>
				 		<td>0 mcg</td>
				 		<td>120 mcg IU</td>
				 
				    </tr>      

				    <tr class="small">
				 
				      <th scope="row">Thiamin (mg)</th>
				 		
				 		<td>20 mg / 1667%</td>
				 		<td>12.5 mg</td>
				 		<td>12 mg</td>
				 		<td>12 mg</td>
				 
				    </tr>

				    <tr class="small">
				 
				      <th scope="row">Riboflavin (mg)</th>
				 		
				 		<td>12 mg / 923%</td>
				 		<td>3.4 mg</td>
				 		<td>1.7 mg</td>
				 		<td>12 mg</td>
				 
				    </tr>

				    <tr class="small">
				 
				      <th scope="row">Niacin (mg)</th>
				 		
				 		<td>40 mg / 250%</td>
				 		<td>20 mg</td>
				 		<td>20 mg</td>
				 		<td>40 mg</td>
				 
				    </tr>

				    <tr class="small">
				 
				      <th scope="row">Vitamin B6 (mg)</th>
				 		
				 		<td>12 mg / 706%</td>
				 		<td>4 mg</td>
				 		<td>2 mg</td>
				 		<td>4 mg</td>
				 
				    </tr>

				    <tr class="small">
				 
				      <th scope="row">Folate (mcg)</th>
				 		
				 		<td>1,333 mcg / 333%</td>
				 		<td>800 mcg</td>
				 		<td>800 mcg</td>
				 		<td>800 mcg</td>
				 
				    </tr>   

				    <tr class="small">
				 
				      <th scope="row">Vitamin B12 (mcg)</th>
				 		
				 		<td>1,000 mcg / 41,667%</td>
				 		<td>1,000 mcg</td>
				 		<td>560 mcg</td>
				 		<td>500 mcg</td>
				 
				    </tr>

				    <tr class="small">
				 
				      <th scope="row">Biotin (mcg)</th>
				 		
				 		<td>600 mcg / 2,000%</td>
				 		<td>600 mcg</td>
				 		<td>600 mcg</td>
				 		<td>600 mcg</td>
				 
				    </tr> 

				    <tr class="small">
				 
				      <th scope="row" class="text-nowrap">Pantothenic acid (mcg)</th>
				 		
				 		<td>20 mcg / 400%</td>
				 		<td>20 mcg</td>
				 		<td>10 mcg</td>
				 		<td>20 mcg</td>
				 
				    </tr>

				    <tr class="small">
				 
				      <th scope="row">Calcium (mg)</th>
				 		
				 		<td>0 mg / 0%</td>
				 		<td>150 mg</td>
				 		<td>200 mg</td>
				 		<td>0 mg</td>
				 
				    </tr>

				    <tr class="small">
				 
				      <th scope="row">Iron (mg)</th>
				 		
				 		<td>45 mg / 250%</td>
				 		<td>45 mg</td>
				 		<td>0 mg</td>
				 		<td>36 mg</td>
				 
				    </tr>

				    <tr class="small">
				 
				      <th scope="row">Iodine (mcg)</th>
				 		
				 		<td>150 mcg / 100%</td>
				 		<td>150 mcg</td>
				 		<td>150 mcg</td>
				 		<td>150 mcg</td>
				 
				    </tr>

				    <tr class="small">
				 
				      <th scope="row">Magnesium (mg)</th>
				 		
				 		<td>100 mg / 24%</td>
				 		<td>50 mg</td>
				 		<td>100 mg</td>
				 		<td>100 mg</td>
				 
				    </tr>

				    <tr class="small">
				 
				      <th scope="row">Zinc (mg)</th>
				 		
				 		<td>15 mg / 136%</td>
				 		<td>15 mg</td>
				 		<td>30 mg</td>
				 		<td>30 mg</td>
				 
				    </tr>

				    <tr class="small">
				 
				      <th scope="row">Selenium (mcg)</th>
				 		
				 		<td>100 mcg / 136%</td>
				 		<td>70 mcg</td>
				 		<td>70 mcg</td>
				 		<td>140 mcg</td>
				 
				    </tr>

				    <tr class="small">
				 
				      <th scope="row">Copper (mg)</th>
				 		
				 		<td>2 mg / 222%</td>
				 		<td>2 mg</td>
				 		<td>2 mg</td>
				 		<td>3 mg</td>
				 
				    </tr>

				    <tr class="small">
				 
				      <th scope="row">Manganese (mg)</th>
				 		
				 		<td>2 mg / 87%</td>
				 		<td>2 mg</td>
				 		<td>2 mg</td>
				 		<td>2 mg</td>
				 
				    </tr>

				    <tr class="small">
				 
				      <th scope="row">Chromium (mcg)</th>
				 		
				 		<td>100 mcg / 286%</td>
				 		<td>120 mcg</td>
				 		<td>120 mcg</td>
				 		<td>200 mcg</td>
				 
				    </tr>

				    <tr class="small">
				 
				      <th scope="row">Molybdenum (mcg)</th>
				 		
				 		<td>75 mcg / 167%</td>
				 		<td>50 mcg</td>
				 		<td>75 mcg</td>
				 		<td>75 mcg</td>
				 
				    </tr>        
				 
				  </tbody>
			</table>
	</div>