diff --git a/main/template/default/admin/settings_index.tpl b/main/template/default/admin/settings_index.tpl
index 741ab4b9fe..206d7fd71b 100755
--- a/main/template/default/admin/settings_index.tpl
+++ b/main/template/default/admin/settings_index.tpl
@@ -44,24 +44,26 @@ $(document).ready(function() {
 });
 </script>
 
-<div id="settings">
+<section id="settings">
     <div class="row">
     {% for block_item in blocks %}
-        <div id="tabs-{{ loop.index }}" class="span6">
-            <div class="well_border {{ block_item.class }}">
-                {% if block_item.editable and _u.is_admin %}
-                    <div class="pull-right edit-block" id="edit-{{ block_item.class }}">
-                        <a href="#" data-label="{{ block_item.label }}" data-id="{{ block_item.class }}">
+        <div id="tabs-{{ loop.index }}" class="col-md-4">
+            <div class="panel panel-default {{ block_item.class }}">
+                <div class="panel-heading">
+                    {{ block_item.icon }} {{ block_item.label }}
+                    {% if block_item.editable and _u.is_admin %}
+                        <a class="pull-right" href="#" data-label="{{ block_item.label }}" data-id="{{ block_item.class }}">
                             <img src="{{ _p.web_img }}icons/22/edit.png" alt="{{ 'Edit' | get_lang }}" title="{{ 'Edit' | get_lang }}">
                         </a>
-                    </div>
-                {% endif %}
-                <h4>{{ block_item.icon }} {{ block_item.label }}</h4>
-                <div style="list-style-type:none">
+                    {% endif %}
+                </div>
+                <div class="panel-body">
+                <div style="display: block;">
                     {{ block_item.search_form }}
                 </div>
                 {% if block_item.items is not null %}
-                    <ul>
+                    <div class="block-items-admin">
+                    <ul class="list-items-admin">
     		    	{% for url in block_item.items %}
     		    		<li>
                             <a href="{{ url.url }}">
@@ -70,6 +72,7 @@ $(document).ready(function() {
                         </li>
     				{% endfor %}
                     </ul>
+                    </div>
                 {% endif %}
 
                 {% if block_item.extra is not null %}
@@ -82,10 +85,11 @@ $(document).ready(function() {
                     <div>{{ block_item.extraContent }}</div>
                 {% endif %}
             </div>
+            </div>
         </div>
     {% endfor %}
     </div>
-</div>
+</section>
 
 {% if _u.is_admin %}
 <div id="modal-extra" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modal-extra-title" aria-hidden="true">
diff --git a/main/template/default/layout/footer.tpl b/main/template/default/layout/footer.tpl
index 6898883e29..45e95ba150 100755
--- a/main/template/default/layout/footer.tpl
+++ b/main/template/default/layout/footer.tpl
@@ -1,7 +1,7 @@
 <footer> <!-- start of #footer section -->
     <div class="container">
         <div class="row">
-            <div id="footer_left" class="span4">
+            <div id="footer_left" class="col-md-4">
                 {% if session_teachers is not null %}
                     <div id="session_teachers">
                         {{ session_teachers }}
@@ -23,7 +23,7 @@
                 &nbsp;
             </div>
 
-            <div id="footer_center" class="span4">
+            <div id="footer_center" class="col-md-4">
                 {#   Plugins for footer section  #}
                 {% if plugin_footer_center is not null %}
                     <div id="plugin_footer_center">
@@ -33,7 +33,7 @@
                 &nbsp;
             </div>
 
-            <div id="footer_right" class="span4">
+            <div id="footer_right" class="col-md-4">
                 {% if administrator_name is not null %}
                     <div id="admin_name">
                         {{ administrator_name }}
diff --git a/main/template/default/layout/layout_1_col.tpl b/main/template/default/layout/layout_1_col.tpl
index cbbed92334..1e7529e6c0 100755
--- a/main/template/default/layout/layout_1_col.tpl
+++ b/main/template/default/layout/layout_1_col.tpl
@@ -4,19 +4,19 @@
 {% block body %}
     {# Plugin main top #}
     {% if plugin_main_top %}
-        <div id="plugin_main_top" class="span12">
+        <div id="plugin_main_top" class="col-md-12">
             {{ plugin_main_top }}
         </div>
     {% endif %}
 
     {#  Plugin top  #}
     {% if plugin_content_top %}
-        <div id="plugin_content_top" class="span12">
+        <div id="plugin_content_top" class="col-md-12">
             {{ plugin_content_top }}
         </div>
     {% endif %}
 
-    <div class="span12">
+    <div class="col-md-12">
         {% include template ~ "/layout/page_body.tpl" %}
         {% block content %}
             {% if content is not null %}
@@ -30,14 +30,14 @@
 
     {#  Plugin bottom  #}
     {% if plugin_content_bottom %}
-        <div id="plugin_content_bottom" class="span12">
+        <div id="plugin_content_bottom" class="col-md-12">
             {{ plugin_content_bottom }}
         </div>
     {% endif %}
 
     {# Plugin main bottom #}
     {% if plugin_main_bottom %}
-        <div id="plugin_main_bottom" class="span12">
+        <div id="plugin_main_bottom" class="col-md-12">
             {{ plugin_main_bottom }}
         </div>
     {% endif %}
diff --git a/main/template/default/layout/layout_2_col.tpl b/main/template/default/layout/layout_2_col.tpl
index d85bafe9a7..cbdcabf205 100755
--- a/main/template/default/layout/layout_2_col.tpl
+++ b/main/template/default/layout/layout_2_col.tpl
@@ -5,13 +5,13 @@
 
     {# Plugin main top #}
     {% if plugin_main_top %}
-        <div id="plugin_main_top" class="span12">
+        <div id="plugin_main_top" class="col-md-12">
             {{ plugin_main_top }}
         </div>
     {% endif %}
 
 	{#  Right column #}
-	<div class="span3 menu-column">
+	<div class="col-md-3 menu-column">
         {% if plugin_menu_top %}
             <div id="plugin_menu_top">
                 {{plugin_menu_top}}
@@ -25,21 +25,22 @@
 		{% endif %}
         {% endblock %}
 
-        <div class="block_user_info">
+
 		{# User picture #}
+
         {{ user_image_block }}
 
         {# User Profile links #}
 		{{ profile_block }}
-        </div>
-        <div class="block_tools_info">
+
+
         {# Course block - admin #}
 		{{ course_block }}
 
         {# Course block - teacher #}
 		{{ teacher_block }}
-        </div>
-        <div class="user_notification">
+
+
 		{# Notice #}
 		{{ notice_block }}
 
@@ -54,7 +55,7 @@
 
 		{# Search (xapian) #}
 		{{ search_block }}
-        </div>
+
 		{# Classes #}
 		{{ classes_block }}
 
@@ -71,7 +72,7 @@
         {% endif %}
 	</div>
 
-	<div class="span9 content-column">
+	<div class="col-md-9">
         {# Plugin bottom #}
         {% if plugin_content_top %}
             <div id="plugin_content_top">
@@ -81,12 +82,8 @@
 
 		{# Portal homepage #}
         {% if home_page_block %}
-            <section id="homepage">
-                <div class="row">
-                    <div class="span9">
-                    {{ home_page_block }}
-                    </div>
-                </div>
+            <section id="homepage-home">
+                {{ home_page_block }}
             </section>
         {% endif %}
 
@@ -99,14 +96,14 @@
 
         {# Welcome to course block  #}
         {% if welcome_to_course_block %}
-            <section id="welcome_to_course">
+            <section id="homepage-course">
             {{ welcome_to_course_block }}
             </section>
         {% endif %}
 
         {% block content %}
         {% if content is not null %}
-            <section id="main_content">
+            <section id="page-content">
                 {{ content }}
             </section>
         {% endif %}
@@ -114,19 +111,15 @@
 
 		{# Announcements  #}
         {% if announcements_block %}
-            <section id="announcements">
+            <section id="homepage-announcements">
             {{ announcements_block }}
             </section>
         {% endif %}
 
         {# Course categories (must be turned on in the admin settings) #}
         {% if course_category_block %}
-            <section id="course_category">
-                <div class="row">
-                    <div class="span9">
-                    {{ course_category_block }}
-                    </div>
-                </div>
+            <section id="homepage-course-category">
+                {{ course_category_block }}
             </section>
         {% endif %}
 
@@ -144,7 +137,7 @@
 
     {# Plugin main bottom #}
     {% if plugin_main_bottom %}
-        <div id="plugin_main_bottom" class="span12">
+        <div id="plugin_main_bottom" class="col-md-12">
             {{ plugin_main_bottom }}
         </div>
     {% endif %}
diff --git a/main/template/default/layout/login_form.tpl b/main/template/default/layout/login_form.tpl
index f09385efa4..fb090ec5d0 100755
--- a/main/template/default/layout/login_form.tpl
+++ b/main/template/default/layout/login_form.tpl
@@ -1,5 +1,6 @@
 {% if login_form %}
-    <div id="login_block" class="well sidebar-nav">
+    <div id="login_block" class="panel panel-default">
+        <div class="panel-body">
         {{ login_language_form }}
 
         {% if plugin_login_top is not null %}
@@ -19,5 +20,6 @@
                 {{ plugin_login_bottom }}
             </div>
         {% endif %}
+        </div>
     </div>
 {% endif %}
diff --git a/main/template/default/layout/main_header.tpl b/main/template/default/layout/main_header.tpl
index dc5b2271b8..ff78b1d3d5 100755
--- a/main/template/default/layout/main_header.tpl
+++ b/main/template/default/layout/main_header.tpl
@@ -34,15 +34,7 @@
     </form>
 {% endif %}
 
-{% if show_header == true %}
-    <div class="skip">
-        <ul>
-            <li><a href="#menu">{{ "WCAGGoMenu"|get_lang }}</a></li>
-            <li><a href="#content" accesskey="2">{{ "WCAGGoContent"|get_lang }}</a></li>
-        </ul>
-    </div>
-    <div id="wrapper">
-    <div id="page" class="page-section"> <!-- page section -->
+<div id="page" class="container"> <!-- page section -->
         {# Bug and help notifications #}
         {% block help_notifications %}
         <ul id="navigation" class="notification-panel">
@@ -55,68 +47,66 @@
         {% block topbar %}
         {% include template ~ "/layout/topbar.tpl" %}
         {% endblock %}
-
-        <div id="main" class="container">
             <header>
-                <div class="row">
-                    <div id="header_left" class="span4">
-                        {# logo #}
-                        {% block logo %}
-                        {{ logo }}
-                        {% endblock %}
-
-                        {# plugin_header left #}
-                        {% if plugin_header_left is not null %}
-                            <div id="plugin_header_left">
-                                {{ plugin_header_left }}
-                            </div>
-                        {% endif %}
-                    </div>
-                    <div id="header_center" class="span3">
-                        {# plugin_header center #}
-                        {% if plugin_header_center is not null %}
-                            <div id="plugin_header_center">
-                                {{ plugin_header_center }}
-                            </div>
-                        {% endif %}
-                        &nbsp;
-                    </div>
-                    <div id="header_right" class="span5">
-                        {# plugin_header right #}
-                        {% if plugin_header_right is not null %}
-                        <div id="plugin_header_right">
-                            {{ plugin_header_right }}
-                        </div>
-                        {% endif %}
-                        <div class="section-notifications">
-                            <ul id="notifications" class="nav nav-pills pull-right">
-                            {{ notification_menu }}
-                            </ul>
+                <div id="main" class="container">
+                    {% if plugin_header_main %}
+                    <div class="row">
+                        <div class="col-lg-12">
+                            {{ plugin_header_main }}
                         </div>
                     </div>
-                </div>
-            {% if plugin_header_main %}
-                <div class="row">
-                    <div class="span12">
-                        <div id="plugin_header_main">
-                            {{ plugin_header_main }}
+                    {% endif %}
+                    <div class="row">
+                        <div class="col-lg-3">
+                            {{ logo }}
+                        </div>
+                        <div class="col-lg-9">
+                            <div class="col-4">
+                                {% if plugin_header_left is not null %}
+                                <div id="plugin_header_left">
+                                    {{ plugin_header_left }}
+                                </div>
+                                {% endif %}
+                            </div>
+                            <div class="col-4">
+                                {% if plugin_header_center is not null %}
+                                <div id="plugin_header_center">
+                                    {{ plugin_header_center }}
+                                </div>
+                                {% endif %}
+                            </div>
+                            <div class="col-4">
+                                {% if plugin_header_right is not null %}
+                                <div id="plugin_header_right">
+                                    {{ plugin_header_right }}
+                                </div>
+                                {% endif %}
+                                <div class="section-notifications">
+                                    <ul id="notifications" class="nav nav-pills pull-right">
+                                        {{ notification_menu }}
+                                    </ul>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
-            {% endif %}
+            </header>
+            <section id="menu-bar">
+                {# menu #}
+                {% block menu %}
+                {% include template ~ "/layout/menu.tpl" %}
+                {% endblock %}
+            </section>
+            <section id="breadcrumb-bar">
+                {# breadcrumb #}
+                {% block breadcrumb %}
+                {{ breadcrumb }}
+                {% endblock %}
+            </section>
 
-            {# menu #}
-            {% block menu %}
-            {% include template ~ "/layout/menu.tpl" %}
-            {% endblock %}
 
-            {# breadcrumb #}
-            {% block breadcrumb %}
-            {{ breadcrumb }}
-            {% endblock %}
-        </header>
-        <div id="top_main_content" class="row">
+        
+        <div id="top_main_content">
 
         {# course navigation links/shortcuts need to be activated by the admin #}
-        {% include template ~ "/layout/course_navigation.tpl" %}
-{% endif %}
+        {% include template ~ "/layout/course_navigation.tpl" %}
\ No newline at end of file
diff --git a/main/template/default/layout/menu.tpl b/main/template/default/layout/menu.tpl
index 9017212088..07ea626ec1 100755
--- a/main/template/default/layout/menu.tpl
+++ b/main/template/default/layout/menu.tpl
@@ -1,60 +1,44 @@
-<div class="navbar subnav">
-    <div class="navbar-inner">
-        <div class="container">
-            <a data-toggle="collapse" data-target=".nav-collapse" class="btn btn-navbar">
+<nav class="navbar navbar-default">
+    <div class="container-fluid">
+        <!-- Brand and toggle get grouped for better mobile display -->
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
-            </a>
-            <a class="brand" href="{{ _p.web }}">{{ portal_name }}</a>
-            <div class="nav-collapse">
-                <ul class="nav">
-                    {{ menu }}
-                </ul>
-
-                {% if _u.logged == 1 %}
-                <ul class="nav pull-right">
-                    {% if user_notifications is not null %}
-                    <li class="notification-marker">
-                        <a href="{{ message_url }}">{{ user_notifications }}</a>
-                    </li>
-                    {% endif %}
-
-                    <li class="dropdown">
-                        {% if _u.status != 6 %}
-                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-                            <img src="{{ _u.avatar_small }}"/>
-                            {{ _u.complete_name }}
-                            <b class="caret"></b>
-                        </a>
-                        <ul class="dropdown-menu">
-                            <li>
-                                {{ profile_link }}
-                                {{ message_link }}
-                            </li>
-                        </ul>
-                        {% endif %}
-                        {% if logout_link is not null %}
-                    <li>
-                        <a id="logout_button" class="logout" title="{{ "Logout"|get_lang }}" href="{{ logout_link }}" >
-                            <img src="{{ "exit.png"|icon(22) }}">
-                        </a>
-                    </li>
-                        {% endif %}
-                </ul>
-                {% else %}
-                    {# Direct login to course - no visible if logged and on the index page #}
-                    {% if course_code != "" and hide_login_link is null %}
-                        <ul class="nav pull-right">
-                            <li class="dropdown" style="color:white;">
-                                <a href='{{ _p.web }}main/auth/gotocourse.php?firstpage={{ course_code }}'>
-                                    {{ "LoginEnter" | get_lang }}
-                                </a>
-                            </li>
-                        </ul>
-                    {% endif %}
-                {% endif %}
-            </div>
+            </button>
         </div>
-    </div>
-</div>
+        <!-- Collect the nav links, forms, and other content for toggling -->
+        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+            <ul class="nav navbar-nav">
+                {{ menu }}
+            </ul>
+           {% if _u.logged == 1 %}
+           <ul class="nav navbar-nav navbar-right">
+               {% if user_notifications is not null %}
+               <li><a href="{{ message_url }}">{{ user_notifications }}</a></li>
+               {% endif %}
+               {% if _u.status != 6 %}
+                <li class="dropdown">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ _u.complete_name }} <span class="caret"></span></a>
+                    <ul class="dropdown-menu" role="menu">
+                        <li>
+                            {{ profile_link }}
+                            {{ message_link }}
+                        </li>
+                    </ul>
+                </li>
+               {% if logout_link is not null %}
+               <li>
+                   <a id="logout_button" title="{{ "Logout"|get_lang }}" href="{{ logout_link }}" >
+                       {{ "Logout"|get_lang }}
+                   </a>
+               </li>
+               {% endif %}
+               {% endif %}
+            </ul>
+            {% endif %}
+        </div><!-- /.navbar-collapse -->
+    </div><!-- /.container-fluid -->
+</nav>
\ No newline at end of file