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>