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>