diff --git a/website/templates/html/blog_footer.html b/website/templates/html/blog_footer.html
index 8a84572..b4a574c 100644
--- a/website/templates/html/blog_footer.html
+++ b/website/templates/html/blog_footer.html
@@ -1,4 +1,4 @@
-<div class="col col-lg-12">
+<div class="col-md-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 ddb61d0..90f6a79 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 col-lg-12" itemscope itemtype="http://schema.org/BlogPost">
+<div class="col-md-12" itemscope itemtype="http://schema.org/BlogPost">
 	<h2 itemprop="name headline">{{ title }}</h2>
 
 	<!-- begin blog content -->
@@ -38,14 +38,16 @@
 		{% include 'app/website/templates/html/comment.html' %}
 	</div>
 	<div><button class="btn btn-default add-comment">{{ texts.add_comment }}</button></div>
-	<div style="display: none; margin-top: 10px;" 
+	<div style="display: none; margin-top: 10px; max-width: 400px;" 
 		id="comment-form">
 		<div class="alert" style="display:none;"></div>
 		<form>
 			<fieldset>
-				<input name="comment_by_fullname" placeholder="Your Name" type="text"/><br>
-				<input name="comment_by" placeholder="Your Email Id" type="text"/><br>
-				<textarea name="comment" placeholder="Comment" style="width: 300px; height: 120px;"/>
+				<input class="form-control" name="comment_by_fullname" placeholder="Your Name" type="text"/><br>
+				<input class="form-control" name="comment_by" 
+					placeholder="Your Email Id" type="text"/><br>
+				<textarea class="form-control" name="comment" rows=10
+					placeholder="Comment"/>
 				</textarea><br>
 				<button class="btn btn-info" id="submit-comment">{{ texts.submit }}</button>
 			</fieldset>
diff --git a/website/templates/html/blogger.html b/website/templates/html/blogger.html
index 738fd1a..90c3571 100644
--- a/website/templates/html/blogger.html
+++ b/website/templates/html/blogger.html
@@ -1,10 +1,10 @@
 <div class="row">
-	<div class="col col-lg-2">
+	<div class="col-md-2">
 		<div class="avatar avatar-large">
 			<img itemprop="thumbnailUrl" src="{{ blogger_info.avatar }}" />
 		</div>
 	</div>
-	<div class="col col-lg-10">
+	<div class="col-md-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 0e6cca7..e391794 100644
--- a/website/templates/html/footer.html
+++ b/website/templates/html/footer.html
@@ -1,6 +1,6 @@
 <footer class="container">
 	<div class="web-footer row">
-	<div class="col col-lg-12">
+	<div class="col-md-12">
 		{% if facebook_share or google_plus_one or twitter_share or linked_in_share %}
 		<div class="social-icons" style="">
 			<span style="font-size: 11px;">{{ share_text or "Share this page on: "}}</span>
@@ -40,8 +40,8 @@
 		{{ address }}
 		{% endif %}
 		<br>
-		<div class="input-group col col-lg-6 col-offset-3">
-			<input type="text" id="footer-subscribe-email" placeholder="Your email address...">
+		<div class="input-group col-md-6 col-md-offset-3">
+			<input class="form-control" type="text" id="footer-subscribe-email" placeholder="Your email address...">
 			<span class="input-group-btn">
 				<button class="btn btn-default" type="button" id="footer-subscribe-button">Stay Updated</button>
 			</span>
diff --git a/website/templates/html/navbar.html b/website/templates/html/navbar.html
index 68706ec..9e827c4 100644
--- a/website/templates/html/navbar.html
+++ b/website/templates/html/navbar.html
@@ -1,13 +1,15 @@
-<div class="navbar">
-	<a class="navbar-brand" href="index">{{ brand_html or "<i class='icon-home'></i>"}}</a>
+<div class="navbar navbar-default">
 	<div class="container">
-		<button type="button" class="navbar-toggle" data-toggle="collapse" 
-			data-target=".navbar-responsive-collapse">
-			<span class="icon-bar"></span>
-			<span class="icon-bar"></span>
-			<span class="icon-bar"></span>
-		</button>
-		<div class="nav-collapse collapse navbar-responsive-collapse">
+		<div class="navbar-header">
+			<button type="button" class="navbar-toggle" data-toggle="collapse" 
+				data-target=".navbar-responsive-collapse">
+				<span class="icon-bar"></span>
+				<span class="icon-bar"></span>
+				<span class="icon-bar"></span>
+			</button>
+			<a class="navbar-brand" href="index">{{ brand_html or "<i class='icon-home'></i>"}}</a>
+		</div>
+		<div class="collapse navbar-collapse navbar-responsive-collapse">
 			<ul class="nav navbar-nav">
 				{%- for page in top_bar_items -%}
 				{% if not page.parent_label -%}
diff --git a/website/templates/html/outer.html b/website/templates/html/outer.html
index bac3515..0f0f400 100644
--- a/website/templates/html/outer.html
+++ b/website/templates/html/outer.html
@@ -20,7 +20,7 @@
 		</div>
 		<div class="clearfix"></div>
 		{% if banner_html %}<div class="row banner">
-			<div class="col col-lg-12">{{ banner_html }}</div>
+			<div class="col-md-12">{{ banner_html }}</div>
 		</div>{% endif %}
 		<div class="outer">
 			{% include "app/website/templates/html/navbar.html" %}
diff --git a/website/templates/html/partner_page.html b/website/templates/html/partner_page.html
index 37cf0b0..e5aac35 100644
--- a/website/templates/html/partner_page.html
+++ b/website/templates/html/partner_page.html
@@ -1,9 +1,9 @@
 {% extends "app/website/templates/html/page.html" %}
 
 {% block content %}
-	<div class="col col-lg-12" itemscope itemtype="http://schema.org/Organization">
+	<div class="col-md-12" itemscope itemtype="http://schema.org/Organization">
 		<div class="row">
-			<div class="col col-lg-4">
+			<div class="col-md-4">
 				{% if logo -%}
 				<img itemprop="brand" src="{{ logo }}" class="partner-logo" 
 					alt="{{ partner_name }}" title="{{ partner_name }}" />
@@ -17,7 +17,7 @@
 					{% if email -%}<p itemprop="email"><span class="icon-envelope"></span> {{ email }}</p>{%- endif %}
 				</address>
 			</div>
-			<div class="col col-lg-8">
+			<div class="col-md-8">
 				<h3 itemprop="name" style="margin-top: 0px;">{{ partner_name }}</h3>
 				<p>{{ description }}</p>
 			</div>
diff --git a/website/templates/html/product_breadcrumbs.html b/website/templates/html/product_breadcrumbs.html
index 3cd501e..6d26748 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 col-lg-12">
+<div class="col-md-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 54a55af..4bf52c5 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 col-lg-12">
+<div class="col-md-12">
 	{% if slideshow %}<!-- slideshow -->
 	{% include "app/website/templates/html/slideshow.html" %}
 	{% endif %}
@@ -13,12 +13,12 @@
 	<h3>{{ name }}</h3>
 	{% endif %}
 </div>
-<div class="col col-lg-12">
+<div class="col-md-12">
 	{% if sub_groups %}
 	<hr />
 	<div class="row">
 	{% for d in sub_groups %}
-		<div class="col col-lg-4">
+		<div class="col-md-4">
 			<a href="{{ d.page_name }}">{{ d.name }} ({{ d.count }})</a>
 		</div>
 	{% endfor %}
diff --git a/website/templates/html/product_in_grid.html b/website/templates/html/product_in_grid.html
index e9752b3..adb2f74 100644
--- a/website/templates/html/product_in_grid.html
+++ b/website/templates/html/product_in_grid.html
@@ -1,4 +1,4 @@
-<div class="col col-lg-3">
+<div class="col-md-3">
 	<div style="height: 120px; overflow: hidden;">
 		<a href="{{ page_name }}">
 		{%- if website_image -%}
diff --git a/website/templates/html/product_in_list.html b/website/templates/html/product_in_list.html
index 14f020b..b3e5b86 100644
--- a/website/templates/html/product_in_list.html
+++ b/website/templates/html/product_in_list.html
@@ -1,5 +1,5 @@
 <!-- TODO product listing -->
-<div class="col col-lg-12">
+<div class="col-md-12">
 	<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 4f04cec..5ac0b48 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 col-lg-12 product-page-content" itemscope itemtype="http://schema.org/Product">
+	<div class="col-md-12 product-page-content" itemscope itemtype="http://schema.org/Product">
 		<div class="row">
-			<div class="col col-lg-6">
+			<div class="col-md-6">
 				{% if slideshow %}
 					{% include "app/website/templates/html/slideshow.html" %}
 				{% else %}
@@ -27,7 +27,7 @@
 					{% endif %}
 				{% endif %}
 			</div>
-			<div class="col col-lg-6">
+			<div class="col-md-6">
 				<h3 itemprop="name" style="margin-top: 0px;">{{ item_name }}</h3>
 				<p class="help">Item Code: <span itemprop="productID">{{ name }}</span></p>
 				<h4>Product Description</h4>
@@ -42,9 +42,9 @@
 							<button class="btn btn-primary">
 								<i class="icon-shopping-cart"></i> Add to Cart</button>
 						</div>
-						<div id="item-update-cart" class="input-group col-lg-4" style="display: none;
+						<div id="item-update-cart" class="input-group col-md-4" style="display: none;
 							padding-left: 0px; padding-right: 0px;">
-							<input type="text">
+							<input class="form-control" type="text">
 							<div class="input-group-btn">
 								<button class="btn btn-primary">
 									<i class="icon-ok"></i></button>
@@ -56,7 +56,7 @@
 		</div>
 		{% if obj.doclist.get({"doctype":"Item Website Specification"}) -%}
 		<div class="row" style="margin-top: 20px">
-			<div class="col col-lg-12">
+			<div class="col-md-12">
 				<h4>Specifications</h4>
 				<table class="table table-bordered" style="width: 100%">
 				{% for d in obj.doclist.get(
diff --git a/website/templates/html/product_search_box.html b/website/templates/html/product_search_box.html
index 29564f3..d808bf6 100644
--- a/website/templates/html/product_search_box.html
+++ b/website/templates/html/product_search_box.html
@@ -1,8 +1,8 @@
-<div class="col col-lg-12 clearfix">
+<div class="col-md-12 clearfix">
 	<div class="pull-right" style="margin-top: 15px; margin-bottom: 15px;">
 		<form class="form-search">
-			<div class="input-group col col-lg-4 col-offset-8">
-				<input type="text" id="product-search" placeholder="Product Search...">
+			<div class="input-group col-md-4 col-md-offset-8">
+				<input class="form-control" type="text" id="product-search" placeholder="Product Search...">
 				<span class="input-group-btn">
 					<button class="btn btn-default" type="button" 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 4711e58..c857263 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 col-lg-12" style="margin-top: 15px;">
+<div class="col-md-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 252df64..8134b63 100644
--- a/website/templates/js/blog.js
+++ b/website/templates/js/blog.js
@@ -56,12 +56,12 @@
 			b.page_name = encodeURIComponent(b.page_name);
 			
 			$(repl('<div class="row">\
-					<div class="col col-lg-1">\
+					<div class="col-md-1">\
 						<div class="avatar avatar-medium" style="margin-top: 6px;">\
 							<img src="%(avatar)s" />\
 						</div>\
 					</div>\
-					<div class="col col-lg-11">\
+					<div class="col-md-11">\
 						<h4><a href="%(page_name)s">%(title)s</a></h4>\
 						<p>%(content)s</p>\
 						<p style="color: #aaa; font-size: 90%">\
@@ -77,7 +77,7 @@
 					.parent().append("<div class='text-muted'>Nothing more to show.</div>");	
 			} else {
 				$("#next-page").toggle(false)
-					.parent().append("<div class='alert'>No blogs written yet.</div>");	
+					.parent().append("<div class='alert alert-warning'>No blogs written yet.</div>");	
 			}
 		} else {
 			$("#next-page").toggle(true);
diff --git a/website/templates/js/blog_page.js b/website/templates/js/blog_page.js
index 11656c8..ee56d90 100644
--- a/website/templates/js/blog_page.js
+++ b/website/templates/js/blog_page.js
@@ -11,7 +11,7 @@
 	}
 	if(n_comments > 50) {
 		$(".add-comment").toggle(false)
-			.parent().append("<div class='alert'>Comments are closed.</div>")
+			.parent().append("<div class='alert alert-warning'>Comments are closed.</div>")
 	}
 	$(".add-comment").click(function() {
 		$("#comment-form").toggle();
@@ -54,7 +54,7 @@
 					$(".no_comment").toggle(false);
 					$(".add-comment").toggle(false);
 					$("#comment-form")
-						.replaceWith("<div class='alert'>Thank you for your comment!</div>")
+						.replaceWith("<div class='alert alert-success'>Thank you for your comment!</div>")
 				}
 			}
 		})
diff --git a/website/templates/js/cart.js b/website/templates/js/cart.js
index 114f85b..ad69824 100644
--- a/website/templates/js/cart.js
+++ b/website/templates/js/cart.js
@@ -133,16 +133,16 @@
 		if(doc.description === doc.item_name) doc.description = "";
 		
 		$(repl('<div class="row">\
-			<div class="col col-lg-9 col-sm-9">\
+			<div class="col-md-9 col-sm-9">\
 				<div class="row">\
-					<div class="col col-lg-3">%(image_html)s</div>\
-					<div class="col col-lg-9">\
+					<div class="col-md-3">%(image_html)s</div>\
+					<div class="col-md-9">\
 						<h4><a href="%(page_name)s">%(item_name)s</a></h4>\
 						<p>%(description)s</p>\
 					</div>\
 				</div>\
 			</div>\
-			<div class="col col-lg-3 col-sm-3 text-right">\
+			<div class="col-md-3 col-sm-3 text-right">\
 				<div class="input-group item-update-cart">\
 					<input type="text" placeholder="Qty" value="%(qty)s" \
 						data-item-code="%(item_code)s" class="text-right">\
@@ -166,14 +166,14 @@
 		}
 		
 		var $tax_row = $(repl('<div class="row">\
-			<div class="col col-lg-9 col-sm-9">\
+			<div class="col-md-9 col-sm-9">\
 				<div class="row">\
-					<div class="col col-lg-9 col-offset-3">' +
+					<div class="col-md-9 col-md-offset-3">' +
 					(shipping_selector || '<p>%(description)s</p>') +
 					'</div>\
 				</div>\
 			</div>\
-			<div class="col col-lg-3 col-sm-3 text-right">\
+			<div class="col-md-3 col-sm-3 text-right">\
 				<p' + (shipping_selector ? ' style="margin-top: 5px;"' : "") + '>%(formatted_tax_amount)s</p>\
 			</div>\
 		</div>', doc)).appendTo($cart_taxes);
@@ -209,9 +209,9 @@
 			$(repl('<div class="accordion-group"> \
 				<div class="accordion-heading"> \
 					<div class="row"> \
-						<div class="col col-lg-10 address-title" \
+						<div class="col-md-10 address-title" \
 							data-address-name="%(name)s"><strong>%(name)s</strong></div> \
-						<div class="col col-lg-2"><input type="checkbox" \
+						<div class="col-md-2"><input type="checkbox" \
 							data-address-name="%(name)s"></div> \
 					</div> \
 				</div> \
diff --git a/website/templates/js/product_list.js b/website/templates/js/product_list.js
index 801bc80..729499c 100644
--- a/website/templates/js/product_list.js
+++ b/website/templates/js/product_list.js
@@ -40,7 +40,7 @@
 	if(data.length < 10) {
 		if(!table) {
 			$(".more-btn")
-				.replaceWith("<div class='alert'>No products found.</div>");
+				.replaceWith("<div class='alert alert-warning'>No products found.</div>");
 		} else {
 			$(".more-btn")
 				.replaceWith("<div class='text-muted'>Nothing more to show.</div>");
diff --git a/website/templates/pages/about.html b/website/templates/pages/about.html
index 2f4f6e4..277f790 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 col-lg-12">
+<div class="col-md-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 col-lg-2"><h4 style="margin:0px;">{{ d.year }}</h4></span>
-		<span class="col col-lg-10"><p>{{ d.highlight }}</p></span>
+		<span class="col-md-2"><h4 style="margin:0px;">{{ d.year }}</h4></span>
+		<span class="col-md-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 col-lg-2">
+		<span class="col-md-2">
 			<div class="avatar avatar-large">
 				<img class="avatar" src="{{ d.image_link }}" style="" itemprop="image">
 			</div>
 		</span>
-		<span class="col col-lg-10"><h4 itemprop="name">{{ d.full_name }}</h4>
+		<span class="col-md-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 b3fe5df..539e014 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 col-lg-12">
+<div class="col-md-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a></li>
     	<li class="active">My Account</li>
diff --git a/website/templates/pages/address.html b/website/templates/pages/address.html
index cf1fc4b..60e705b 100644
--- a/website/templates/pages/address.html
+++ b/website/templates/pages/address.html
@@ -8,7 +8,7 @@
 	{% if df.fieldtype in ["Data", "Link"] -%}
 	<fieldset>
 		<label>{{ df.label }}</label>
-		<input type="text" placeholder="Type {{ df.label }}" 
+		<input class="form-control" type="text" placeholder="Type {{ df.label }}" 
 			data-fieldname="{{ df.fieldname }}" data-fieldtype="{{ df.fieldtype }}"
 			{% if doc and doc.fields.get(df.fieldname) -%} value="{{ doc.fields[df.fieldname] }}" {%- endif %}>
 	</fieldset>
@@ -37,7 +37,7 @@
 {%- endmacro %}
 
 {% block content %}
-<div class="col col-lg-12">
+<div class="col-md-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a></li>
     	<li><a href="account">My Account</a></li>
@@ -52,10 +52,10 @@
 	<div id="address-error" class="alert alert-danger" style="display: none;"></div>
 	<form autocomplete="on">
 		<div class="row">
-			<section class="col col-lg-6">
+			<section class="col-md-6">
 				{{ render_fields(meta.left_fields) }}
 			</section>
-			<section class="col col-lg-6">
+			<section class="col-md-6">
 				{{ render_fields(meta.right_fields) }}
 			</section>
 		</section>
diff --git a/website/templates/pages/addresses.html b/website/templates/pages/addresses.html
index 8526666..90d0d13 100644
--- a/website/templates/pages/addresses.html
+++ b/website/templates/pages/addresses.html
@@ -3,7 +3,7 @@
 {% set title="My Addresses" %}
 
 {% block content %}
-<div class="col col-lg-12">
+<div class="col-md-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a></li>
     	<li><a href="account">My Account</a></li>
diff --git a/website/templates/pages/blog.html b/website/templates/pages/blog.html
index d7eaba4..9bd1abf 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 col-lg-12">
+<div class="col-md-12">
 	<h2 id="blog-title">{{ blog_title }}</h2>
 	{% if blog_introduction %}
 	<p>{{ blog_introduction }}</p>
diff --git a/website/templates/pages/cart.html b/website/templates/pages/cart.html
index 5bfca33..70775ab 100644
--- a/website/templates/pages/cart.html
+++ b/website/templates/pages/cart.html
@@ -7,7 +7,7 @@
 {% set title="Shopping Cart" %}
 
 {% block content %}
-<div class="col col-lg-12">
+<div class="col-md-12">
 	<h2><i class="icon-shopping-cart"></i> {{ title }}</h2>
 	<div class="progress progress-striped active">
 		<div class="progress-bar progress-bar-info" style="width: 100%;"></div>
@@ -18,12 +18,12 @@
 		<div id="cart-error" class="alert alert-danger" style="display: none;"></div>
 		<hr>
 		<div class="row">
-			<div class="col col-lg-9 col-sm-9">
+			<div class="col-md-9 col-sm-9">
 				<div class="row">
-					<div class="col col-lg-9 col-offset-3"><h4>Item Details</h4></div>
+					<div class="col-md-9 col-md-offset-3"><h4>Item Details</h4></div>
 				</div>
 			</div>
-			<div class="col col-lg-3 col-sm-3 text-right"><h4>Qty, Amount</h4></div>
+			<div class="col-md-3 col-sm-3 text-right"><h4>Qty, Amount</h4></div>
 		</div><hr>
 		<div id="cart-items">
 		</div>
@@ -34,14 +34,14 @@
 		<hr>
 		<div id="cart-addresses">
 			<div class="row">
-				<div class="col col-lg-6">
+				<div class="col-md-6">
 					<h4>Shipping Address</h4>
 					<div id="cart-shipping-address" class="accordion" 
 						data-fieldname="shipping_address_name"></div>
 					<button class="btn btn-default" type="button" id="cart-add-shipping-address">
 						<span class="icon icon-plus"></span> New Shipping Address</button>
 				</div>
-				<div class="col col-lg-6">
+				<div class="col-md-6">
 					<h4>Billing Address</h4>
 					<div id="cart-billing-address" class="accordion"
 						data-fieldname="customer_address"></div>
diff --git a/website/templates/pages/contact.html b/website/templates/pages/contact.html
index 113b627..3798708 100644
--- a/website/templates/pages/contact.html
+++ b/website/templates/pages/contact.html
@@ -7,32 +7,32 @@
 {% set title="Contact Us" %}
 
 {% block content %}
-<div class="col col-lg-12">
+<div class="col-md-12">
 	<h3>{{ obj.doc.heading or "Contact Us"}}</h3>
 	<div class="row">
-		<div class="web-form col col-lg-8">
-			<p id="contact-alert" class="alert" 
+		<div class="web-form col-md-8">
+			<p id="contact-alert" class="alert alert-warning" 
 				style="display: none;">&nbsp;</p>
 			<p>
-				<select name="subject">
+				<select name="subject" class="form-control">
 				{% for option in obj.query_options %}
 					<option value="{{ option }}">{{ option }}</option>
 				{% endfor %}
 				</select>
 			</p>
 			<p>
-				<input name="email" type="text" 
+				<input class="form-control" name="email" type="text" 
 				placeholder="Your Email Address" />
 			</p>
 			<p>
-				<textarea rows="10" name="message"></textarea>
+				<textarea rows="10" name="message" class="form-control"></textarea>
 			</p>
 			<p>
 				<button class="btn btn-primary btn-send">Send</button>
 			</p>
 		</div>
 		{% if obj.doc.address %}
-		<div class="col col-lg-3 col-offset-1 alert" style="margin-top: 20px;" itemscope itemtype="http://schema.org/PostalAddress">
+		<div class="col-md-3 col-md-offset-1 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 61afe32..1893575 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 col-lg-12">
+<div class="col-md-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a></li>
     	<li><a href="account">My Account</a></li>
@@ -15,16 +15,16 @@
 	{%- if doc.status -%}
 	<div style="font-size: 13px;">
 	<div class="row">
-		<div class="col col-lg-2">
+		<div class="col-md-2">
 			<div class="label">{{ doc.status }}</div>
 		</div>
-		<div class="col col-lg-4">
+		<div class="col-md-4">
 			{{ utils.formatdate(doc.transaction_date) }}
 		</div>
 	</div>
 	<br>
 	<div class="row">
-		<div class="col col-lg-12">
+		<div class="col-md-12">
 		<table class="table table-bordered">
 			<tbody>
 				<tr>
@@ -52,8 +52,8 @@
 		</div>
 	</div>
 	<div class="row">
-		<div class="col col-lg-6"></div>
-		<div class="col col-lg-6">
+		<div class="col-md-6"></div>
+		<div class="col-md-6">
 		<table cellspacing=0 width=100%>
 		<tbody>
 			<tr>
diff --git a/website/templates/pages/orders.html b/website/templates/pages/orders.html
index bb72fc3..e0bf4d7 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 col-lg-12">
+<div class="col-md-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 col-lg-3"><a href="order?name=%(name)s">%(name)s</a></div>\
-					<div class="col col-lg-9"></div>\
+					<div class="col-md-3"><a href="order?name=%(name)s">%(name)s</a></div>\
+					<div class="col-md-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 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 class="col-md-3">%(item_name)s</div>\
+							<div class="col-md-2" style="text-align: right;">%(export_rate)s</div>\
+							<div class="col-md-2" style="text-align: right;">%(qty)s %(stock_uom)s</div>\
+							<div class="col-md-2" style="text-align: right;">%(export_amount)s</div>\
 						</div>\
-					</div>', item)).appendTo($order.find(".col col-lg-9"));
+					</div>', item)).appendTo($order.find(".col-md-9"));
 				});
 				
 				$("<hr>").appendTo($list);
diff --git a/website/templates/pages/partners.html b/website/templates/pages/partners.html
index c090227..50a095d 100644
--- a/website/templates/pages/partners.html
+++ b/website/templates/pages/partners.html
@@ -3,12 +3,12 @@
 {% set title="Partners" %}
 
 {% block content %}
-	<div class="col col-lg-12">
+	<div class="col-md-12">
 		<h2 id="blog-title">{{ title }}</h2>
 		<hr>
 		{% for partner_info in partners %}
 		<div class="row">
-			<div class="col col-lg-3">
+			<div class="col-md-3">
 				{% if partner_info.logo -%}
 				<a href="{{ partner_info.page_name }}">
 					<img itemprop="brand" src="{{ partner_info.logo }}" class="partner-logo" 
@@ -16,7 +16,7 @@
 				</a>
 				{%- endif %}
 			</div>
-			<div class="col col-lg-9">
+			<div class="col-md-9">
 				<a href="{{ partner_info.page_name }}">
 					<h4>{{ partner_info.partner_name }}</h4>
 				</a>
diff --git a/website/templates/pages/product_search.html b/website/templates/pages/product_search.html
index 4711408..e969f75 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 col-lg-12">
+<div class="col-md-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 61ae1b0..ea2433b 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 col-lg-12">
+<div class="col-md-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,23 +15,23 @@
 	<form>
 		<fieldset>
 			<label>Full Name</label>
-			<input type="text" id="fullname" placeholder="Your Name">
+			<input class="form-control" type="text" id="fullname" placeholder="Your Name">
 		</fieldset>
 		<fieldset>
 			<label>Password</label>
-			<input type="password" id="password" placeholder="Password">
+			<input class="form-control" type="password" id="password" placeholder="Password">
 		</fieldset>
 		<fieldset>
 			<label>Company Name</label>
-			<input type="text" id="company_name" placeholder="Company Name" value="{{ company_name }}">
+			<input class="form-control" type="text" id="company_name" placeholder="Company Name" value="{{ company_name }}">
 		</fieldset>
 		<fieldset>
 			<label>Mobile No</label>
-			<input type="text" id="mobile_no" placeholder="Mobile No" value="{{ mobile_no }}">
+			<input class="form-control" type="text" id="mobile_no" placeholder="Mobile No" value="{{ mobile_no }}">
 		</fieldset>
 		<fieldset>
 			<label>Phone</label>
-			<input type="text" id="phone" placeholder="Phone" value="{{ phone }}">
+			<input class="form-control" type="text" id="phone" placeholder="Phone" value="{{ phone }}">
 		</fieldset>
 		<button id="update_profile" type="submit" class="btn btn-default">Update</button>
 	</form>
diff --git a/website/templates/pages/ticket.html b/website/templates/pages/ticket.html
index 5835246..1ae2e88 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 col-lg-12">
+<div class="col-md-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 col-lg-2">
+		<div class="col-md-2">
 			<div class="label">{{ doc.status }}</div>
 		</div>
-		<div class="col col-lg-7">
+		<div class="col-md-7">
 			{{ doc.subject }}
 		</div>
-		<div class="col col-lg-3">
+		<div class="col-md-3">
 			{{ utils.formatdate(doc.transaction_date) }}
 		</div>
 	</div>
diff --git a/website/templates/pages/tickets.html b/website/templates/pages/tickets.html
index 901453d..3d5cf21 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 col-lg-12">
+<div class="col-md-12">
     <ul class="breadcrumb">
     	<li><a href="index">Home</a></li>
     	<li><a href="account">My Account</a></li>
@@ -39,9 +39,9 @@
 				
 				// parent
 				var $ticket = $(repl('<div class="row">\
-					<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 class="col-md-2"><span class="label">%(status)s</span></div>\
+					<div class="col-md-3"><a href="ticket?name=%(name)s">%(name)s</a></div>\
+					<div class="col-md-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 9d660b8..5b254b0 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 col-lg-12">
+<div class="col-md-12">
 	<h2 id="blog-title">Blog Writers</h2>
 	{% if writers_introduction %}
 	<p>{{ writers_introduction }}</p>