diff --git a/addons/website_event/views/website_event.xml b/addons/website_event/views/website_event.xml
index 7c05419d15a..bc81caf0ea9 100644
--- a/addons/website_event/views/website_event.xml
+++ b/addons/website_event/views/website_event.xml
@@ -24,9 +24,9 @@
             <t t-set="title">Events</t>
             <div class="container mt48">
                 <div class="row">
-                    <div class="span4 css_noprint" id="left_column">
-                        <ul class="nav nav-list">
-                            <li class="nav-header">Date</li>
+                    <div class="col-md-4 css_noprint" id="left_column">
+                        <ul class="nav nav-pills nav-stacked">
+                            <li>Date</li>
                             <t t-foreach="dates" t-as="date">
                                 <li t-att-class="searches.get('date') == date[0] and 'active' or ''">
                                     <a t-attf-href="/event/#{ search_path }&amp;date=#{ date[0] }"><t t-esc="date[1]"/> <small t-if="date[3]">(<t t-esc="date[3]"/>)</small></a>
@@ -34,22 +34,22 @@
                             </t>
                         </ul>
                     </div>
-                    <div class='span8 navbar navbar-inverse'>
+                    <div class="col-md-8 navbar navbar-inverse">
                         <div class='navbar-inner'>
                             <t t-call="website.pager" >
                                 <t t-set="classname">pull-left</t>
                             </t>
                         </div>
                     </div>
-                    <div class="span8">
+                    <div class="col-md-8">
                         <ul class="media-list">
                             <li t-foreach="event_ids" t-as="event" class="media thumbnail">
                                 <div class="media-body">
-                                    <span t-if="not event.event_ticket_ids" class="label pull-right">No tickets needed.</span>
+                                    <span t-if="not event.event_ticket_ids" class="label label-default pull-right">No tickets needed.</span>
                                     <t t-if="event.event_ticket_ids">
-                                        <span t-if="event.register_avail == 9999" class="label pull-right label-info">Tickets availables.</span>
-                                        <span t-if="not event.register_avail" class="label pull-right">No ticket available.</span>
-                                        <span t-if="event.register_avail and event.register_avail != 9999" t-attf-class="label pull-right label-#{ event.register_avail &lt;= 10 and 'warning' or 'info' }">
+                                        <span t-if="event.register_avail == 9999" class="label label-default pull-right label-info">Tickets availables.</span>
+                                        <span t-if="not event.register_avail" class="label label-default pull-right">No ticket available.</span>
+                                        <span t-if="event.register_avail and event.register_avail != 9999" t-attf-class="label label-default pull-right label-#{ event.register_avail &lt;= 10 and 'warning' or 'info' }">
                                             <t t-if="event.register_avail &lt;= 10">Only</t>
                                             <t t-esc="event.register_avail"/>
                                             <t t-if="event.register_avail &gt; 1">tickets</t>
@@ -75,7 +75,7 @@
                             </li>
                         </ul>
                     </div>
-                    <div class="span8 offset4 text-center">
+                    <div class="col-md-8 col-lg-offset-4 text-center">
                         <t t-call="website.pager" />
                     </div>
                 </div>
@@ -85,8 +85,8 @@
 
     <template id="event_category" inherit_id="website_event.index" inherit_option_id="website_event.index" name="Category">
         <xpath expr="//div[@id='left_column']" position="inside">
-            <ul class="nav nav-list">
-                <li class="nav-header">Category</li>
+            <ul class="nav nav-pills nav-stacked">
+                <li>Category</li>
                 <t t-foreach="types">
                     <li t-if="type" t-att-class="searches.get('type') == str(type and type[0]) and 'active' or ''">
                         <a t-attf-href="/event/#{ search_path }&amp;type=#{ type[0] }"><t t-esc="type[1]"/> <small>(<t t-esc="type_count"/>)</small></a>
@@ -97,8 +97,8 @@
     </template>
     <template id="event_location" inherit_id="website_event.index" inherit_option_id="website_event.index" name="Location">
         <xpath expr="//div[@id='left_column']" position="inside">
-            <ul class="nav nav-list">
-                <li class="nav-header">Location</li>
+            <ul class="nav nav-pills nav-stacked">
+                <li>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 ''">
                         <a t-attf-href="/event/#{ search_path }&amp;country=#{ country_id[0] }"><t t-esc="country_id[1]"/><small>(<t t-esc="country_id_count"/>)</small></a>
@@ -117,7 +117,7 @@
             <t t-set="title">Events</t>
             <div class="container mt48">
                 <div class="row">
-                    <div class="span4 css_noprint">
+                    <div class="col-md-4 css_noprint">
                         <h4>When &amp; Where</h4>
                         <a t-att-href="event_id.google_map_link()" target="_BLANK">
                             <img class="thumbnail" t-att-src="event_id.google_map_img()"/>
@@ -132,13 +132,14 @@
                             </t>
                         </address>
                     </div>
-                    <div class="span8">
+                    <div class="col-md-8">
                         <div class="media-body">
-                            <span t-if="not event_id.event_ticket_ids" class="label pull-right">No tickets needed.</span>
+                            <span t-if="not event_id.event_ticket_ids" class="label label-default pull-right">No tickets needed.</span>
                             <t t-if="event_id.event_ticket_ids">
-                                <span t-if="event_id.register_avail == 9999" class="label pull-right">Tickets availables.</span>
-                                <span t-if="not event_id.register_avail" class="label pull-right">No ticket available.</span>
-                                <span t-if="event_id.register_avail and event_id.register_avail != 9999" t-attf-class="label pull-right label-#{ event_id.register_avail &lt;= 10 and 'warning' or 'info' }">
+                                <span t-if="event_id.register_avail == 9999" class="label label-default pull-right">Tickets availables.</span>
+                                <span t-if="not event_id.register_avail" class="label label-default pull-right">No ticket available.</span>
+                                <span t-if="event_id.register_avail and event_id.register_avail != 9999"
+t-attf-class="label label-default pull-right label-#{ event_id.register_avail &lt;= 10 and 'warning' or 'info' }">
                                     <t t-if="event_id.register_avail &lt;= 10">Only</t>
                                     <t t-esc="event_id.register_avail"/>
                                     <t t-if="event_id.register_avail &gt; 1">tickets </t>