diff --git a/accounts/page/accounts_browser/accounts_browser.html b/accounts/page/accounts_browser/accounts_browser.html
index 0107930..109d8cc 100644
--- a/accounts/page/accounts_browser/accounts_browser.html
+++ b/accounts/page/accounts_browser/accounts_browser.html
@@ -1,4 +1,4 @@
-<div class="appframe col-span-12">
+<div class="appframe col col-lg-12">
 	<div class="appframe-area"></div>
 	<div class="layout-main">
 		<div class="tree-area"></div>
diff --git a/accounts/page/financial_statements/financial_statements.html b/accounts/page/financial_statements/financial_statements.html
index c68ab1a..bc2fce0 100644
--- a/accounts/page/financial_statements/financial_statements.html
+++ b/accounts/page/financial_statements/financial_statements.html
@@ -1,4 +1,4 @@
-<div class="appframe col-span-12">
+<div class="appframe col col-lg-12">
 <div id="fs_header"></div>
 <div id="print_html">
 	<div id="stmt_title1" style="margin:16px 0px 4px 0px; font-size: 16px; font-weight: bold; color: #888;"></div>
diff --git a/docs/docs.user.intro.md b/docs/docs.user.intro.md
index a507d16..4aada62 100644
--- a/docs/docs.user.intro.md
+++ b/docs/docs.user.intro.md
@@ -1,12 +1,11 @@
 ---
 {
-	"_label": "Introduction"
+	"_label": "Introduction",
+	"_title_image": "img/why-erpnext.png"
 }
 ---
 ## What is an ERP and why should I care?
 
-![Business Owner](img/why-erpnext.png)
-
 Small business are not so different from large ones. They contain most of the complexities of a large business but with many more constraints. Small businesses have to communicate with customers, do accounts, pay taxes, do payroll, manage timelines, deliver quality, answer questions and keep everyone happy just like large businesses.
 
 And to it *efficiently*.
diff --git a/docs/docs.user.setup.accounting.md b/docs/docs.user.setup.accounting.md
index f550d7d..b10cf5b 100644
--- a/docs/docs.user.setup.accounting.md
+++ b/docs/docs.user.setup.accounting.md
@@ -1,14 +1,13 @@
 ---
 {
-	"_label": "Accounting Setup"
+	"_label": "Accounting Setup",
+	"_title_image": "img/setup-accounting.png"
 }
 ---
 ## Chart of Accounts
 
 The Chart of Accounts forms the blueprint of your organization. The overall structure of your Chart of Accounts is based on a system of double entry accounting that has become a standard all over the world to quantify how a company is doing financially. 
 
-![Blueprint](img/setup-accounting.png)
-
 The Chart of Accounts helps you answer:
 
 - What is your organization worth?
diff --git a/docs/docs.user.setup.before.md b/docs/docs.user.setup.before.md
index 1896e26..158890f 100644
--- a/docs/docs.user.setup.before.md
+++ b/docs/docs.user.setup.before.md
@@ -1,6 +1,7 @@
 ---
 {
-	"_label": "Before We Start"
+	"_label": "Before We Start",
+	"_title_image": "img/before-we-start.png"
 }
 ---
 ## Before We Start
@@ -13,8 +14,6 @@
 
 Like exercise. 
 
-![Runner](img/before-we-start.png)
-
 Human body does not require to be exercised today or maybe tomorrow, but in the long run, if you wish to maintain your body and its health, you should get on the treadmill.
 
 In the same way, ERPs improve the health of your organization over a long run by keep it fit and efficient. The more you delay putting things in order, the more time you lose and the closer you get to a major disaster.
diff --git a/docs/docs.user.setup.codification.md b/docs/docs.user.setup.codification.md
new file mode 100644
index 0000000..650e173
--- /dev/null
+++ b/docs/docs.user.setup.codification.md
@@ -0,0 +1,64 @@
+---
+{
+	"_label": "Item Codification"
+}
+---
+
+> To Codify or Not To Codify, is the question.
+
+If you already have a running business with a number of physical items, you would have probably coded your items. If you have not, you have a choice. We recommend you should codify, but its your call.
+
+Item codification is always a sensitive topic and wars have been fought on this (not joking). In our experience, when you have items that cross a certain size, life without codification is a nightmare. 
+
+### Benefits
+
+- Standard way of naming things.
+- Less likely to have duplicates.
+- Explicit definition.
+- Help you quickly find if a similar item exists.
+- Item names get longer and longer as more types get introduced. Codes are shorter.
+
+### Pain
+
+- You have to remember the codes!
+- Harder for new team members to pick up.
+- You have to create new codes all the time.
+
+### Example
+
+You should have a simple manual / cheat-sheet to codify your items instead of just numbering them sequentially. Each letter should mean something. Here is an example:
+
+If your business involves wooden furniture, then you may codify as follows:
+
+Item Codification Summary Sheet
+(SAMPLE)
+
+	First letter: "Material"			Third letter: "Size"
+
+	- W - Wood 							- 0 - less than 1mm
+	- H - Hardware 						- 1 - 1mm - 5mm
+	- G - Glass 						- 2 - 5mm - 10mm
+	- U - Upholstery 					- 3 - 10mm - 10cm
+	- P - Plastic
+
+	Second Letter: "Type"
+
+	For Wood:							For Hardware:
+
+	- S - Sheet							- S - Screw
+	- B - Bar							- N - Nut
+	- L - L-section 					- W - Washer
+	- M - Molded 						- B - Bracket
+	- R - Round
+
+The last few letters could be sequential. So by looking at code **WM304** - you know its a wooden molding less than 10cm in size 
+
+### Standardization
+
+If you have more than one person naming items, the style of naming items will change for everyone. Sometimes, even for one person, he or she may forget how did they name the item and may create a duplicate name _"Wooden Sheet 3mm" or "3mm Sheet of Wood"?_
+
+### Rationalizing
+
+It is a good practice to have minimum varieties of items so that you keep minimum stock, housekeeping is simpler etc. When you are planning a new product and you want to know if you are already purchasing a part in some other product, the item codes will help you quickly determine if you are using a similar raw material in another product.
+
+We believe if you do this small investment, it will help you rationalize things as your business grows, though its okay not to codify if you have less items.
\ No newline at end of file
diff --git a/docs/docs.user.setup.customer.md b/docs/docs.user.setup.customer.md
index 8baa8e9..829f943 100644
--- a/docs/docs.user.setup.customer.md
+++ b/docs/docs.user.setup.customer.md
@@ -1,6 +1,7 @@
 ---
 {
-	"_label": "Foundation: Customer"
+	"_label": "Foundation: Customer",
+	"_title_image": "img/customers.png"
 }
 ---
 You can either directly create your Customers via 
diff --git a/docs/docs.user.setup.item.md b/docs/docs.user.setup.item.md
index 8362e5c..e85876b 100644
--- a/docs/docs.user.setup.item.md
+++ b/docs/docs.user.setup.item.md
@@ -1,6 +1,7 @@
 ---
 {
-	"_label": "Foundation: Item"
+	"_label": "Foundation: Item",
+	"_title_image": "img/items.png"
 }
 ---
 Items, Customers and Suppliers form the foundation of any ERP system.
diff --git a/home/page/activity/activity.html b/home/page/activity/activity.html
index ac369c3..8b67d3c 100644
--- a/home/page/activity/activity.html
+++ b/home/page/activity/activity.html
@@ -1,4 +1,4 @@
-<div class="appframe col-span-12">
+<div class="appframe col col-lg-12">
 	<div class="layout-appframe"></div>
 	<div class="layout-main">
 		<div id="activity-list">
diff --git a/home/page/attributions/attributions.html b/home/page/attributions/attributions.html
index 3b35283..47a74a8 100644
--- a/home/page/attributions/attributions.html
+++ b/home/page/attributions/attributions.html
@@ -1,4 +1,4 @@
-<div class="appframe col-span-12 layout-attributions">
+<div class="appframe col col-lg-12 layout-attributions">
 	<div class="layout-appframe"></div>
 	<div class="layout-main">
 	<h3>ERPNext is made using these Awesome Open Source Projects <i class="icon-heart" style="color: red"></i></h3>
diff --git a/selling/page/sales_browser/sales_browser.html b/selling/page/sales_browser/sales_browser.html
index ab89816..19c7503 100644
--- a/selling/page/sales_browser/sales_browser.html
+++ b/selling/page/sales_browser/sales_browser.html
@@ -1,4 +1,4 @@
-<div class="appframe col-span-12">
+<div class="appframe col col-lg-12">
 	<div class="appframe-area"></div>
 	<div class="layout-main-section">
 		<div class="tree-area"></div>
diff --git a/utilities/page/markdown_reference/markdown_reference.html b/utilities/page/markdown_reference/markdown_reference.html
index 5ec813b..767ac36 100644
--- a/utilities/page/markdown_reference/markdown_reference.html
+++ b/utilities/page/markdown_reference/markdown_reference.html
@@ -1,4 +1,4 @@
-<div class="appframe col-span-12">
+<div class="appframe col col-lg-12">
 	<div class="layout-appframe">
 		<div class="appframe-titlebar">
 			<span class="appframe-title">Markdown Reference</span>
diff --git a/utilities/page/question_view/question_view.html b/utilities/page/question_view/question_view.html
index 13f96a3..0f22abf 100644
--- a/utilities/page/question_view/question_view.html
+++ b/utilities/page/question_view/question_view.html
@@ -1,4 +1,4 @@
-<div class="appframe col-span-12">
+<div class="appframe col col-lg-12">
 	<div class="layout-appframe"></div>
 	<div class="layout-main" style="min-height: 400px">
 		<div class="qv-question-wrapper">
diff --git a/utilities/page/questions/questions.html b/utilities/page/questions/questions.html
index bd003ce..4307847 100644
--- a/utilities/page/questions/questions.html
+++ b/utilities/page/questions/questions.html
@@ -1,4 +1,4 @@
-<div class="appframe col-span-12">
+<div class="appframe col col-lg-12">
 	<div class="layout-appframe"></div>
 	<div class="layout-main-section">
 		<div class="kb-search-wrapper">
diff --git a/website/templates/html/blog_footer.html b/website/templates/html/blog_footer.html
index ecb463c..cab099b 100644
--- a/website/templates/html/blog_footer.html
+++ b/website/templates/html/blog_footer.html
@@ -1,4 +1,4 @@
-<div class="col-span-12">
+<div class="col col-lg-12">
 	<hr />
 	{% if categories %}
 	<h5>Explore posts by categories</h5>
diff --git a/website/templates/html/blog_page.html b/website/templates/html/blog_page.html
index 0cabe6d..c5378dd 100644
--- a/website/templates/html/blog_page.html
+++ b/website/templates/html/blog_page.html
@@ -9,7 +9,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="col-span-12" itemscope itemtype="http://schema.org/BlogPost">
+<div class="col col-lg-12" itemscope itemtype="http://schema.org/BlogPost">
 	<h2 itemprop="name headline">{{ title }}</h2>
 
 	<!-- begin blog content -->
diff --git a/website/templates/html/blogger.html b/website/templates/html/blogger.html
index 878caad..738fd1a 100644
--- a/website/templates/html/blogger.html
+++ b/website/templates/html/blogger.html
@@ -1,10 +1,10 @@
 <div class="row">
-	<div class="col-span-2">
+	<div class="col col-lg-2">
 		<div class="avatar avatar-large">
 			<img itemprop="thumbnailUrl" src="{{ blogger_info.avatar }}" />
 		</div>
 	</div>
-	<div class="col-span-10">
+	<div class="col col-lg-10">
 		<h4>{{ blogger_info.full_name }}</h4>
 		<p style="color: #999">{{ blogger_info.bio }}</p>
 		<p><a href="blog?by={{ blogger_info.name }}&by_name={{ blogger_info.full_name }}">
diff --git a/website/templates/html/footer.html b/website/templates/html/footer.html
index 7260fa5..746b6e9 100644
--- a/website/templates/html/footer.html
+++ b/website/templates/html/footer.html
@@ -38,7 +38,7 @@
 	{{ address }}
 	{% endif %}
 	<p><div class="input-append" style="text-align: center; margin:30px 0px;">
-	  <input class="col-span-3" id="footer-subscribe-email" type="text" placeholder="Your email address...">
+	  <input class="col col-lg-3" id="footer-subscribe-email" type="text" placeholder="Your email address...">
 	  <button class="btn" type="button" id="footer-subscribe-button">Stay Updated</button>
 	</div></p>
 	<script>
diff --git a/website/templates/html/outer.html b/website/templates/html/outer.html
index 1eaa2ab..ec71476 100644
--- a/website/templates/html/outer.html
+++ b/website/templates/html/outer.html
@@ -7,7 +7,7 @@
 		</div>
 		<div class="clearfix"></div>
 		{% if banner_html %}<div class="row" style="margin-top: 30px;">
-			<div class="col-span-12">{{ banner_html }}</div>
+			<div class="col col-lg-12">{{ banner_html }}</div>
 		</div>{% endif %}
 		<div class="outer">
 			{% include "app/website/templates/html/navbar.html" %}
diff --git a/website/templates/html/product_breadcrumbs.html b/website/templates/html/product_breadcrumbs.html
index f3661ce..3f8c42a 100644
--- a/website/templates/html/product_breadcrumbs.html
+++ b/website/templates/html/product_breadcrumbs.html
@@ -1,5 +1,5 @@
 {% if obj.parent_groups and len(obj.parent_groups) > 1 %}
-<div class="col-span-12">
+<div class="col col-lg-12">
 	<div class="clearfix">
 		<ul class="breadcrumb">
 			{% for ig in obj.parent_groups[:-1] %}
diff --git a/website/templates/html/product_group.html b/website/templates/html/product_group.html
index 23ecbc8..042eb33 100644
--- a/website/templates/html/product_group.html
+++ b/website/templates/html/product_group.html
@@ -3,7 +3,7 @@
 {% block content %}
 {% include 'app/website/templates/html/product_search_box.html' %}
 {% include 'app/website/templates/html/product_breadcrumbs.html' %}
-<div class="col-span-12">
+<div class="col col-lg-12">
 	{% if slideshow %}<!-- slideshow -->
 	{% include "app/website/templates/html/slideshow.html" %}
 	{% endif %}
@@ -16,7 +16,7 @@
 	<hr />
 	<div class="row">
 	{% for d in sub_groups %}
-		<div class="col-span-4">
+		<div class="col col-lg-4">
 			<a href="{{ d.page_name }}">{{ d.name }} ({{ d.count }})</a>
 		</div>
 	{% endfor %}
diff --git a/website/templates/html/product_in_list.html b/website/templates/html/product_in_list.html
index 7a47006..e9752b3 100644
--- a/website/templates/html/product_in_list.html
+++ b/website/templates/html/product_in_list.html
@@ -1,4 +1,4 @@
-<div class="col-span-3">
+<div class="col col-lg-3">
 	<div style="height: 120px; overflow: hidden;">
 		<a href="{{ page_name }}">
 		{%- if website_image -%}
diff --git a/website/templates/html/product_page.html b/website/templates/html/product_page.html
index 9353ce8..abca195 100644
--- a/website/templates/html/product_page.html
+++ b/website/templates/html/product_page.html
@@ -11,9 +11,9 @@
 {% block content %}
 	{% include 'app/website/templates/html/product_search_box.html' %}
 	{% include 'app/website/templates/html/product_breadcrumbs.html' %}
-	<div class="col-span-12 product-page-content" itemscope itemtype="http://schema.org/Product">
+	<div class="col col-lg-12 product-page-content" itemscope itemtype="http://schema.org/Product">
 		<div class="row">
-			<div class="col-span-6">
+			<div class="col col-lg-6">
 				{% if slideshow %}
 					{% include "app/website/templates/html/slideshow.html" %}
 				{% else %}
@@ -27,7 +27,7 @@
 					{% endif %}
 				{% endif %}
 			</div>
-			<div class="col-span-6">
+			<div class="col col-lg-6">
 				<h3 itemprop="name" style="margin-top: 0px;">{{ item_name }}</h3>
 				<p class="help">Item Code: {{ name }}</p>
 				<h4>Product Description</h4>
diff --git a/website/templates/html/product_search_box.html b/website/templates/html/product_search_box.html
index db1b1d0..9bce9c5 100644
--- a/website/templates/html/product_search_box.html
+++ b/website/templates/html/product_search_box.html
@@ -1,8 +1,8 @@
-<div class="col-span-12 clearfix">
+<div class="col col-lg-12 clearfix">
 	<div class="pull-right" style="margin-top: 15px;">
 		<form class="form-search">
 			<div class="input-append">
-				<input type="text" class="col-span-2 search-query" 
+				<input type="text" class="col col-lg-2 search-query" 
 					id="product-search" placeholder="Product Search..." />
 				<button class="btn" id="btn-product-search">
 					<i class="icon-search"></i></button>
diff --git a/website/templates/html/web_page.html b/website/templates/html/web_page.html
index 884e7cb..4711e58 100644
--- a/website/templates/html/web_page.html
+++ b/website/templates/html/web_page.html
@@ -7,7 +7,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="col-span-12" style="margin-top: 15px;">
+<div class="col col-lg-12" style="margin-top: 15px;">
 	{% include "app/website/templates/html/slideshow.html" %}
 	{{ main_section }}
 </div>
diff --git a/website/templates/js/blog.js b/website/templates/js/blog.js
index 053eae0..ec7b83a 100644
--- a/website/templates/js/blog.js
+++ b/website/templates/js/blog.js
@@ -69,12 +69,12 @@
 			b.page_name = encodeURIComponent(b.page_name);
 			
 			$(repl('<div class="row">\
-					<div class="col-span-1">\
+					<div class="col col-lg-1">\
 						<div class="avatar avatar-medium" style="margin-top: 6px;">\
 							<img src="%(avatar)s" />\
 						</div>\
 					</div>\
-					<div class="col-span-11">\
+					<div class="col col-lg-11">\
 						<h4><a href="%(page_name)s">%(title)s</a></h4>\
 						<p>%(content)s</p>\
 						<p style="color: #aaa; font-size: 90%">\
diff --git a/website/templates/pages/about.html b/website/templates/pages/about.html
index 71ffd33..2f4f6e4 100644
--- a/website/templates/pages/about.html
+++ b/website/templates/pages/about.html
@@ -3,14 +3,14 @@
 {% set title="About Us" %}
 
 {% block content %}
-<div class="col-span-12">
+<div class="col col-lg-12">
 	{{ obj.doc.company_introduction or "<h2>About Us</h2><p>Some Introduction about your company that you would like your website visitor to know. More people than you think will read your About page. People always like to know who the are doing business with. Be authentic and avoid using jargon like 'value added services' etc. Be sure to update your company history and list of key team members in Website > About Us Settings</p>" }}
 	{% if obj.doclist.get({"doctype":"Company History"}) %}
 	<h3>{{ obj.doc.company_history_heading or "Company History" }}</h3>
 	{% for d in obj.doclist.get({"doctype":"Company History"}) %}
 	<div class="row">
-		<span class="col-span-2"><h4 style="margin:0px;">{{ d.year }}</h4></span>
-		<span class="col-span-10"><p>{{ d.highlight }}</p></span>
+		<span class="col col-lg-2"><h4 style="margin:0px;">{{ d.year }}</h4></span>
+		<span class="col col-lg-10"><p>{{ d.highlight }}</p></span>
 	</div>
 	{% endfor %}
 	{% endif %}
@@ -18,12 +18,12 @@
 	<h3>{{ obj.doc.team_members_heading or "Team Members" }}</h3>
 	{% for d in obj.doclist.get({"doctype":"About Us Team Member"}) %}
 	<div class="row" itemscope itemtype="http://schema.org/Person">
-		<span class="col-span-2">
+		<span class="col col-lg-2">
 			<div class="avatar avatar-large">
 				<img class="avatar" src="{{ d.image_link }}" style="" itemprop="image">
 			</div>
 		</span>
-		<span class="col-span-10"><h4 itemprop="name">{{ d.full_name }}</h4>
+		<span class="col col-lg-10"><h4 itemprop="name">{{ d.full_name }}</h4>
 			<p itemprop="description">{{ d.bio }}</p>
 		</span>
 	</div>
diff --git a/website/templates/pages/account.html b/website/templates/pages/account.html
index b9f2f4a..f6992e1 100644
--- a/website/templates/pages/account.html
+++ b/website/templates/pages/account.html
@@ -3,7 +3,7 @@
 {% set title="My Account" %}
 
 {% block content %}
-<div class="col-span-12">
+<div class="col col-lg-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a> <span class="divider">/</span></li>
     	<li class="active">My Account</li>
diff --git a/website/templates/pages/attributions.html b/website/templates/pages/attributions.html
index d07cf52..0f534a4 100644
--- a/website/templates/pages/attributions.html
+++ b/website/templates/pages/attributions.html
@@ -11,7 +11,7 @@
 {% set title="ERPNext - Web Based, Open Source ERP" %}
 
 {% block content %}
-<div class="layout-attributions col-span-12">
+<div class="layout-attributions col col-lg-12">
 	<h3>This website is made using these awesome Open Source projects <i class="icon-heart" style="color: red"></i></h3>
 	<hr>
 	<table class="table table-bordered table-striped">
diff --git a/website/templates/pages/blog.html b/website/templates/pages/blog.html
index c9879fe..ba98f36 100644
--- a/website/templates/pages/blog.html
+++ b/website/templates/pages/blog.html
@@ -11,7 +11,7 @@
 {% set title="Blog" %}
 
 {% block content %}
-<div class="col-span-12">
+<div class="col col-lg-12">
 	<h2 id="blog-title">{{ blog_title }}</h2>
 	{% if blog_introduction %}
 	<p>{{ blog_introduction }}</p>
diff --git a/website/templates/pages/contact.html b/website/templates/pages/contact.html
index f2eca0a..10576f8 100644
--- a/website/templates/pages/contact.html
+++ b/website/templates/pages/contact.html
@@ -7,28 +7,28 @@
 {% set title="Contact Us" %}
 
 {% block content %}
-<div class="col-span-12">
+<div class="col col-lg-12">
 	<h3>{{ obj.doc.heading or "Contact Us"}}</h3>
 	<div class="row">
-		<div class="web-form col-span-8">
+		<div class="web-form col col-lg-8">
 			<div class="row">
-			<div class="col-span-6">
+			<div class="col col-lg-6">
 				<p id="contact-alert" class="alert" 
 					style="display: none;">&nbsp;</p>
 			</div>
 			</div>
 			<div class="clearfix"></div>
-			<p><select class="col-span-6" name="subject">
+			<p><select class="col col-lg-6" name="subject">
 				{% for option in obj.query_options %}
 					<option value="{{ option }}">{{ option }}</option>
 				{% endfor %}
 			</select></p>
-			<p><input class="col-span-6" name="email" type="text" placeholder="Your Email Address" /></p>
-			<p><textarea class="col-span-6" rows="10" name="message"></textarea></p>
+			<p><input class="col col-lg-6" name="email" type="text" placeholder="Your Email Address" /></p>
+			<p><textarea class="col col-lg-6" rows="10" name="message"></textarea></p>
 			<p><button class="btn btn-primary btn-send">Send</button></p>
 		</div>
 		{% if obj.doc.address %}
-		<div class="col-span-3 alert" style="margin-top: 20px;" itemscope itemtype="http://schema.org/PostalAddress">
+		<div class="col col-lg-3 alert" style="margin-top: 20px;" itemscope itemtype="http://schema.org/PostalAddress">
 			<h4><i class="icon-map-marker"></i> {{ obj.address.address_title }}</h4>
 			{% if obj.address.address_line1 %}
 				<span itemprop="streetAddress">{{ obj.address.address_line1 }}</span><br>
diff --git a/website/templates/pages/order.html b/website/templates/pages/order.html
index 8a5db32..2588d39 100644
--- a/website/templates/pages/order.html
+++ b/website/templates/pages/order.html
@@ -3,7 +3,7 @@
 {% set title=doc.name %}
 
 {% block content %}
-<div class="col-span-12">
+<div class="col col-lg-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a> <span class="divider">/</span></li>
     	<li><a href="account">My Account</a> <span class="divider">/</span></li>
@@ -15,16 +15,16 @@
 	{%- if doc.status -%}
 	<div style="font-size: 13px;">
 	<div class="row">
-		<div class="col-span-2">
+		<div class="col col-lg-2">
 			<div class="label">{{ doc.status }}</div>
 		</div>
-		<div class="col-span-4">
+		<div class="col col-lg-4">
 			{{ utils.formatdate(doc.transaction_date) }}
 		</div>
 	</div>
 	<br>
 	<div class="row">
-		<div class="col-span-12">
+		<div class="col col-lg-12">
 		<table class="table table-bordered">
 			<tbody>
 				<tr>
@@ -52,8 +52,8 @@
 		</div>
 	</div>
 	<div class="row">
-		<div class="col-span-6"></div>
-		<div class="col-span-6">
+		<div class="col col-lg-6"></div>
+		<div class="col col-lg-6">
 		<table cellspacing=0 width=100%>
 		<tbody>
 			<tr>
diff --git a/website/templates/pages/orders.html b/website/templates/pages/orders.html
index d52087f..b5b0dd9 100644
--- a/website/templates/pages/orders.html
+++ b/website/templates/pages/orders.html
@@ -8,7 +8,7 @@
 currency = "{{ currency }}";
 wn.currency_symbols = {{ currency_symbols }};
 </script>
-<div class="col-span-12">
+<div class="col col-lg-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a> <span class="divider">/</span></li>
     	<li><a href="account">My Account</a> <span class="divider">/</span></li>
@@ -44,8 +44,8 @@
 				
 				// parent
 				var $order = $(repl('<div class="row">\
-					<div class="col-span-3"><a href="order?name=%(name)s">%(name)s</a></div>\
-					<div class="col-span-9"></div>\
+					<div class="col col-lg-3"><a href="order?name=%(name)s">%(name)s</a></div>\
+					<div class="col col-lg-9"></div>\
 				</div>', order)).appendTo($list);
 				
 				// items
@@ -53,12 +53,12 @@
 					item.export_rate = format_currency(item.export_rate, order.currency);
 					item.export_amount = format_currency(item.export_amount, order.currency);
 					var $item = $(repl('<div class="row">\
-							<div class="col-span-3">%(item_name)s</div>\
-							<div class="col-span-2" style="text-align: right;">%(export_rate)s</div>\
-							<div class="col-span-2" style="text-align: right;">%(qty)s %(stock_uom)s</div>\
-							<div class="col-span-2" style="text-align: right;">%(export_amount)s</div>\
+							<div class="col col-lg-3">%(item_name)s</div>\
+							<div class="col col-lg-2" style="text-align: right;">%(export_rate)s</div>\
+							<div class="col col-lg-2" style="text-align: right;">%(qty)s %(stock_uom)s</div>\
+							<div class="col col-lg-2" style="text-align: right;">%(export_amount)s</div>\
 						</div>\
-					</div>', item)).appendTo($order.find(".col-span-9"));
+					</div>', item)).appendTo($order.find(".col col-lg-9"));
 				});
 				
 				$("<hr>").appendTo($list);
diff --git a/website/templates/pages/product_search.html b/website/templates/pages/product_search.html
index ce5cd39..4711408 100644
--- a/website/templates/pages/product_search.html
+++ b/website/templates/pages/product_search.html
@@ -18,7 +18,7 @@
 </script>
 
 {% include 'app/website/templates/html/product_search_box.html' %}
-<div class="col-span-12">
+<div class="col col-lg-12">
 	<h3 class="search-results">Search Results</h3>
 	<div id="search-list" class="row">
 		
diff --git a/website/templates/pages/profile.html b/website/templates/pages/profile.html
index 1b7729f..40d6a19 100644
--- a/website/templates/pages/profile.html
+++ b/website/templates/pages/profile.html
@@ -3,7 +3,7 @@
 {% set title="My Profile" %}
 
 {% block content %}
-<div class="col-span-12">
+<div class="col col-lg-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a> <span class="divider">/</span></li>
     	<li><a href="account">My Account</a> <span class="divider">/</span></li>
diff --git a/website/templates/pages/ticket.html b/website/templates/pages/ticket.html
index d154d16..5835246 100644
--- a/website/templates/pages/ticket.html
+++ b/website/templates/pages/ticket.html
@@ -3,7 +3,7 @@
 {% set title=doc.name %}
 
 {% block content %}
-<div class="col-span-12">
+<div class="col col-lg-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a> <span class="divider">/</span></li>
     	<li><a href="account">My Account</a> <span class="divider">/</span></li>
@@ -14,13 +14,13 @@
 	<hr>
 	{%- if doc.status -%}
 	<div class="row">
-		<div class="col-span-2">
+		<div class="col col-lg-2">
 			<div class="label">{{ doc.status }}</div>
 		</div>
-		<div class="col-span-7">
+		<div class="col col-lg-7">
 			{{ doc.subject }}
 		</div>
-		<div class="col-span-3">
+		<div class="col col-lg-3">
 			{{ utils.formatdate(doc.transaction_date) }}
 		</div>
 	</div>
diff --git a/website/templates/pages/tickets.html b/website/templates/pages/tickets.html
index 0ea534b..27881ef 100644
--- a/website/templates/pages/tickets.html
+++ b/website/templates/pages/tickets.html
@@ -3,7 +3,7 @@
 {% set title="My Tickets" %}
 
 {% block content %}
-<div class="col-span-12">
+<div class="col col-lg-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a> <span class="divider">/</span></li>
     	<li><a href="account">My Account</a> <span class="divider">/</span></li>
@@ -39,9 +39,9 @@
 				
 				// parent
 				var $ticket = $(repl('<div class="row">\
-					<div class="col-span-2"><span class="label">%(status)s</span></div>\
-					<div class="col-span-3"><a href="ticket?name=%(name)s">%(name)s</a></div>\
-					<div class="col-span-7">%(subject)s</div>\
+					<div class="col col-lg-2"><span class="label">%(status)s</span></div>\
+					<div class="col col-lg-3"><a href="ticket?name=%(name)s">%(name)s</a></div>\
+					<div class="col col-lg-7">%(subject)s</div>\
 				</div>', ticket)).appendTo($list);
 				
 				$("<hr>").appendTo($list);
diff --git a/website/templates/pages/writers.html b/website/templates/pages/writers.html
index 5f0836d..9d660b8 100644
--- a/website/templates/pages/writers.html
+++ b/website/templates/pages/writers.html
@@ -3,7 +3,7 @@
 {% set title="Blog Writers" %}
 
 {% block content %}
-<div class="col-span-12">
+<div class="col col-lg-12">
 	<h2 id="blog-title">Blog Writers</h2>
 	{% if writers_introduction %}
 	<p>{{ writers_introduction }}</p>