diff --git a/accounts/page/accounts_browser/accounts_browser.html b/accounts/page/accounts_browser/accounts_browser.html
index 01079309683..109d8cc1ad5 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 c68ab1a8db2..bc2fce0ca7c 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 a507d16197b..4aada627d05 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 f550d7d7460..b10cf5b466f 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 1896e26e8cf..158890f3a87 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 @@ ERPs are not required.
 
 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 00000000000..650e173114b
--- /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 8baa8e9aeac..829f9439bdb 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 8362e5c33d2..e85876ba896 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 ac369c37a05..8b67d3c7f5b 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 3b35283e0b6..47a74a8fa6c 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 ab89816eb55..19c7503996f 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 5ec813b3cde..767ac36e301 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 13f96a33c4f..0f22abf1ea2 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 bd003ce3567..43078471b37 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 ecb463c1679..cab099b4eaf 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 0cabe6dc11f..c5378dd716f 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 878caad5f61..738fd1a6061 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 7260fa5b2e4..746b6e91149 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 1eaa2ab81e1..ec71476f77b 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 f3661cef5e1..3f8c42ac731 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 23ecbc86487..042eb3397b8 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 7a470060a90..e9752b3d4a5 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 9353ce805cd..abca195bbe4 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 db1b1d0522a..9bce9c501e2 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 884e7cbb51b..4711e58d88f 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 053eae06c01..ec7b83a1b0d 100644
--- a/website/templates/js/blog.js
+++ b/website/templates/js/blog.js
@@ -69,12 +69,12 @@ var blog = {
 			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 71ffd33bf1a..2f4f6e41e19 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 b9f2f4a5866..f6992e13f5b 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 d07cf523e94..0f534a40d27 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 c9879fedab8..ba98f364126 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 f2eca0a66fd..10576f8ff76 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 8a5db327451..2588d39479d 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 d52087f8eaf..b5b0dd9193f 100644
--- a/website/templates/pages/orders.html
+++ b/website/templates/pages/orders.html
@@ -8,7 +8,7 @@ global_number_format = "{{ global_number_format }}";
 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 @@ $(document).ready(function() {
 				
 				// 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 @@ $(document).ready(function() {
 					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 ce5cd391911..47114080b30 100644
--- a/website/templates/pages/product_search.html
+++ b/website/templates/pages/product_search.html
@@ -18,7 +18,7 @@ $(document).ready(function() {
 </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 1b7729f318e..40d6a197fc7 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 d154d167e4c..5835246e14e 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 0ea534b4400..27881efa4d9 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 @@ $(document).ready(function() {
 				
 				// 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 5f0836d4f2c..9d660b8706c 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>