diff --git a/addons/website_contract/views/website_contract.xml b/addons/website_contract/views/website_contract.xml
index a8ef26000bf..be1a5c296a1 100644
--- a/addons/website_contract/views/website_contract.xml
+++ b/addons/website_contract/views/website_contract.xml
@@ -27,19 +27,22 @@
     <template id="index" name="References">
         <t t-call="website_contract.layout">
             <t t-set="ref_content">
-                <h1 class="span12 text-center">Trusted by millions worldwide</h1>
-                <h2 class="span12 text-center">Our public references</h2>
-                <div class="span12" id="ref_content">
-                    <div class='navbar navbar-inverse'>
-                        <div class='navbar-inner'>
-                            <t t-call="website.pager" >
-                                <t t-set="classname">pull-left</t>
-                            </t>
-                            <form action="/references/" method="get" class="navbar-search pull-right pagination">
-                                <input type="text" name="search" class="search-query span2" placeholder="Search" t-att-value="search or '' or ''"/>
-                            </form>
-                        </div>
-                    </div>
+                <h1 class="col-md-12 text-center">Trusted by millions worldwide</h1>
+                <h2 class="col-md-12 text-center">Our public references</h2>
+                <div class="col-md-12" id="ref_content">
+                   <nav class="navbar navbar-inverse" role="navigation">
+                       <div class="collapse navbar-collapse navbar-ex1-collapse">
+                           <t t-call="website.pager">
+                              <t t-set="classname">pull-left</t>
+                           </t>
+                           <form action="/references/" method="get" class="navbar-search pull-right pagination">
+                              <input type="text" name="search" class="search-query col-md-2 form-control" placeholder="Search" t-att-value="search or '' or ''" />
+                           </form>
+                       </div>
+                   </nav> 
+                        <!-- <div class="navbar-inner">
+                            
+                        </div> -->
                     <div>
                         <div t-foreach="partner_ids" t-as="partner" class="media thumbnail">
                             <a class="pull-left" t-attf-href="/references/#{ partner.id }/">
@@ -59,8 +62,8 @@
 
     <template id="ref_country" inherit_id="website_contract.index" inherit_option_id="website_contract.index" name="Left Country Categories">
         <xpath expr="//div[@id='ref_content']" position="before">
-            <div class="span4">
-                <ul class="nav nav-list">
+            <div class="col-md-4">
+                <ul class="nav">
                     <li class="nav-header">Location</li>
                     <!--t t-foreach="countries">
                         <li t-if="country_id" t-att-class="searches.get('country') == str(country_id and country_id[0]) and 'active' or ''">
@@ -71,7 +74,7 @@
             </div>
         </xpath>
         <xpath expr="//div[@id='ref_content']" position="attributes">
-            <attribute name="class">span8</attribute>
+            <attribute name="class">col-md-8</attribute>
         </xpath>
     </template>
 
@@ -79,8 +82,8 @@
         <t t-call="website_contract.layout">
             <t t-set="ref_content">
                 <t t-call="website.publish"><t t-set="object" t-value="partner_id"/></t>
-                <h1 class="span12 text-center" t-field="partner_id.name"/>
-                <div class="span4">
+                <h1 class="col-md-12 text-center" t-field="partner_id.name"/>
+                <div class="col-md-4">
                     <div class="text-center">
                         <img t-att-src="partner_id.img('image_medium')"/>
                     </div>
@@ -92,17 +95,17 @@
                             </colgroup>
                             <tbody>
                                 <t t-set="address" t-value="'&lt;br/&gt;'.join(partner_id.name_get()[0][1].split('\n')[1:])"/>
-                                <tr t-if="address or editable"><th>Address</th><td class="span2" t-raw="address"/></tr>
-                                <tr t-if="partner_id.website or editable"><th>Website</th><td class="span2" t-field="partner_id.website"/></tr>
-                                <tr t-if="partner_id.phone or editable"><th>Tel</th><td class="span2" t-field="partner_id.phone"/></tr>
-                                <tr t-if="partner_id.mobile or editable"><th>Tel</th><td class="span2" t-field="partner_id.mobile"/></tr>
-                                <tr t-if="partner_id.fax or editable"><th>Fax</th><td class="span2" t-field="partner_id.fax"/></tr>
-                                <tr t-if="partner_id.email or editable"><th>Email</th><td class="span2" t-field="partner_id.email"/></tr>
+                                <tr t-if="address or editable"><th>Address</th><td class="col-md-2" t-raw="address"/></tr>
+                                <tr t-if="partner_id.website or editable"><th>Website</th><td class="col-md-2" t-field="partner_id.website"/></tr>
+                                <tr t-if="partner_id.phone or editable"><th>Tel</th><td class="col-md-2" t-field="partner_id.phone"/></tr>
+                                <tr t-if="partner_id.mobile or editable"><th>Tel</th><td class="col-md-2" t-field="partner_id.mobile"/></tr>
+                                <tr t-if="partner_id.fax or editable"><th>Fax</th><td class="col-md-2" t-field="partner_id.fax"/></tr>
+                                <tr t-if="partner_id.email or editable"><th>Email</th><td class="col-md-2" t-field="partner_id.email"/></tr>
                             </tbody>
                         </table>
                     </address>
                 </div>
-                <div class="span8 mt32" t-field="partner_id.website_description"/>
+                <div class="col-md-8 mt32" t-field="partner_id.website_description"/>
             </t>
         </t>
     </template>
diff --git a/addons/website_sale/views/website_sale.xml b/addons/website_sale/views/website_sale.xml
index 9ee05d334b5..b8025c6b9c8 100644
--- a/addons/website_sale/views/website_sale.xml
+++ b/addons/website_sale/views/website_sale.xml
@@ -97,8 +97,8 @@
         <t t-call="website_sale.layout">
             <t t-set="title">Product</t>
             <t t-set="shop_content">
-                <div class='navbar navbar-inverse'>
-                    <div class='navbar-inner'>
+                <nav class='navbar navbar-inverse' role='navigation'>
+                    <div class="collapse navbar-collapse navbar-ex1-collapse">
                         <t t-call="website.pager" >
                             <t t-set="classname">pull-left</t>
                         </t>
@@ -106,7 +106,7 @@
                             <input type="text" name="search" class="search-query col-md-2" placeholder="Search" t-att-value="search or '' or ''"/>
                         </form>
                     </div>
-                </div>
+                </nav>
                 <div class='row grid grid-align-top' style="margin-left: 16px !important;">
                     <t t-foreach="products" t-as="product">
                     <div t-attf-class="col-md-2 mb16 thumbnail text-center #{not product.website_published and 'alert alert-warning' or ''}">