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>