[gnome-continuous-yocto/gnomeostree-3.28-rocko: 898/8267] bitbake: toaster: port all build analysis pages to bootstrap 3



commit a7d498dfd3929eafb87274f27b487ef2fe1e7e68
Author: Belen Barros Pena <belen barros pena linux intel com>
Date:   Thu Jun 2 14:26:16 2016 +0100

    bitbake: toaster: port all build analysis pages to bootstrap 3
    
    Port all the pages in the build analysis area to bootstrap version 3.
    
    (Bitbake rev: f963b73f0bf32db2df39dd79d8d85184c280cda0)
    
    Signed-off-by: Belen Barros Pena <belen barros pena linux intel com>
    Signed-off-by: Michael Wood <michael g wood intel com>
    Signed-off-by: Richard Purdie <richard purdie linuxfoundation org>

 bitbake/lib/toaster/toastergui/buildtables.py      |    8 +-
 .../toastergui/static/css/bootstrap-theme.css      |  587 --------------------
 .../toastergui/static/css/bootstrap-theme.css.map  |    1 -
 .../toastergui/static/css/bootstrap-theme.min.css  |    6 -
 .../static/css/bootstrap-theme.min.css.map         |    1 -
 .../lib/toaster/toastergui/static/css/default.css  |  114 ++++-
 .../lib/toaster/toastergui/static/js/libtoaster.js |    4 +-
 bitbake/lib/toaster/toastergui/templates/base.html |    2 +-
 .../toastergui/templates/basebuilddetailpage.html  |   30 +-
 .../toastergui/templates/basebuildpage.html        |   71 +--
 .../toastergui/templates/basetable_bottom.html     |   20 +-
 .../toastergui/templates/basetable_top.html        |  121 +++--
 .../toastergui/templates/builddashboard.html       |  131 ++---
 .../toastergui/templates/configuration.html        |   10 +-
 .../toaster/toastergui/templates/configvars.html   |  147 +++---
 .../toaster/toastergui/templates/customrecipe.html |    2 +-
 .../templates/detail_pagination_bottom.html        |   20 +-
 .../toastergui/templates/detail_search_header.html |   74 ++--
 .../toastergui/templates/detail_sorted_header.html |    6 +-
 .../lib/toaster/toastergui/templates/dirinfo.html  |   27 +-
 .../toastergui/templates/filtersnippet.html        |  114 ++--
 .../templates/package_built_dependencies.html      |   12 +-
 .../toastergui/templates/package_built_detail.html |    8 +-
 .../toastergui/templates/package_detail_base.html  |   24 +-
 .../templates/package_included_dependencies.html   |   16 +-
 .../templates/package_included_tabs.html           |    8 +-
 .../lib/toaster/toastergui/templates/recipe.html   |  102 +++--
 .../toastergui/templates/recipe_packages.html      |   23 +-
 .../toastergui/templates/recipedetails.html        |    2 +-
 .../templates/snippets/gitrev_popover.html         |    2 +-
 .../snippets/pkg_dependencies_popover.html         |    2 +-
 .../snippets/pkg_revdependencies_popover.html      |    2 +-
 .../lib/toaster/toastergui/templates/target.html   |   10 +-
 bitbake/lib/toaster/toastergui/templates/task.html |  159 ++++--
 .../toastergui/templates/unavailable_artifact.html |   10 +-
 .../toaster/toastergui/templatetags/projecttags.py |   12 +-
 bitbake/lib/toaster/toastergui/views.py            |    1 -
 37 files changed, 753 insertions(+), 1136 deletions(-)
---
diff --git a/bitbake/lib/toaster/toastergui/buildtables.py b/bitbake/lib/toaster/toastergui/buildtables.py
index 00a053d..8ef33fd 100644
--- a/bitbake/lib/toaster/toastergui/buildtables.py
+++ b/bitbake/lib/toaster/toastergui/buildtables.py
@@ -260,10 +260,10 @@ class BuiltRecipesTable(BuildTablesMixin):
         {% with deps=data.r_dependencies_recipe.all %}
         {% with count=deps|length %}
         {% if count %}
-        <a class="btn" title="
+        <a class="btn btn-default" title="
         <a href='{% url "recipe" extra.build.pk data.pk %}#dependencies'>
         {{data.name}}</a> dependencies"
-        data-content="<ul class='unstyled'>
+        data-content="<ul class='list-unstyled'>
         {% for dep in deps|dictsort:"depends_on.name"%}
         <li><a href='{% url "recipe" extra.build.pk dep.depends_on.pk %}'>
         {{dep.depends_on.name}}</a></li>
@@ -278,11 +278,11 @@ class BuiltRecipesTable(BuildTablesMixin):
         {% with revs=data.r_dependencies_depends.all %}
         {% with count=revs|length %}
         {% if count %}
-        <a class="btn"
+        <a class="btn btn-default"
         title="
         <a href='{% url "recipe" extra.build.pk data.pk %}#brought-in-by'>
         {{data.name}}</a> reverse dependencies"
-        data-content="<ul class='unstyled'>
+        data-content="<ul class='list-unstyled'>
         {% for dep in revs|dictsort:"recipe.name" %}
         <li>
         <a href='{% url "recipe" extra.build.pk dep.recipe.pk %}'>
diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css 
b/bitbake/lib/toaster/toastergui/static/css/default.css
index 30328fd..0d3570a 100644
--- a/bitbake/lib/toaster/toastergui/static/css/default.css
+++ b/bitbake/lib/toaster/toastergui/static/css/default.css
@@ -22,11 +22,21 @@ img.logo { height: 30px; vertical-align: bottom; }
 /* Increase popovers width to fit commit SHAs */
 .popover { max-width: 350px; }
 
+/* Set a limit to popover height to handle long dependency lists */
+.popover-content { max-height: 350px; overflow: scroll; }
+
+/* Set a limit to modal dialogs height to handle long variable history */
+[id^="variable-"] .modal-content { max-height: 550px; overflow-y: scroll; }
+
+/* Make sure long values in variable history do not make the modal dialogs
+ * scroll horizontally */
+[id^="variable-"] .modal-content p { word-break: break-all; }
+
 /* Increase bottom margin of definition lists inside popovers for the Toaster version information in the top 
navbar, and also inside the right hand columns of our details pages */
 .popover-content dd,
-.well dd { margin-bottom: 15px; }
+.item-info dd { margin-bottom: 15px; }
 
-/* Style the horizonal definition lists */
+/* Style the horizontal definition lists */
 .dl-horizontal dt { width: 200px; line-height: 25px; }
 .dl-horizontal dd { margin-left: 220px; line-height: 25px; }
 
@@ -48,21 +58,24 @@ img.logo { height: 30px; vertical-align: bottom; }
 
 /* Styles for our table controls */
 .form-control[id^="search-input-"],
-.form-control[id^="new-search-input-"] { width: 30em; }
+.form-control[id^="new-search-input-"],
+#search{ width: 30em; }
 #search-input-selectpackagestable,
 #search-input-packagestable,
-.form-control[id^="no-results-search-input-"]{ width: 20em; }
+.form-control[id^="no-results-search-input-"] { width: 20em; }
 #edit-columns-button { margin-right: 30px; }
-.navbar-default[id^="table-chrome-"] { background-color: transparent; }
+.navbar-default[id^="table-chrome-"],
+#variables .navbar-default { background-color: transparent; }
 [id^="table-chrome-collapse-"] .navbar-form { margin-left: -15px; }
-.dropdown-menu.editcol { padding-left: 10px; min-width: 180px; }
+.dropdown-menu.editcol { padding-left: 10px; min-width: 200px; }
 span[class^="remove-search-btn-"] { position: absolute; right: 5px; top: 0; bottom: 0; height: 14px; margin: 
auto; font-size: 14px; cursor: pointer; color: #777;}
 span[class^="remove-search-btn-"]:hover { color: #333; }
 #no-results-special-selectpackagestable .form-inline { margin-top: 20px; }
 [id^="pagination-"] .pagination,
 [id^="pagination-"] .navbar-form { margin-top: 0; }
 [id^="table-chrome-"] .navbar-form { margin-left: -15px; margin-right: -15px; }
-[id^="table-chrome-"] .detail-page-contols { padding-left: 0; padding-right: 0; }
+[id^="table-chrome-"] .detail-page-contols,
+#packages-built .detail-page-controls { padding-left: 0; padding-right: 0; }
 
 /* Override the default font-weight for labels: it's a bit too much */
 label { font-weight: normal; }
@@ -86,7 +99,7 @@ dd > .glyphicon-ok-circle { color: #3c763d; }
 tbody > tr > td > .glyphicon-minus-sign { color: #a94442; }
 .glyphicon-download-alt,
 .glyphicon-edit { color: #337ab7; }
-.failed_tasks .glyphicon-download-alt { margin-left: 5px; } 
+.failed_tasks .glyphicon-download-alt { margin-left: 5px; }
 .glyphicon-download-alt:hover,
 .glyphicon-edit:hover { color: #23527c; cursor: pointer; text-decoration: none; }
 .glyphicon-trash { color: #a94442; }
@@ -98,7 +111,8 @@ tbody > tr > td > .glyphicon-minus-sign { color: #a94442; }
 h1 > .glyphicon-edit,
 p.lead .glyphicon { font-size: 16px; }
 h2 > .glyphicon-question-sign,
-h3 > .glyphicon-question-sign { font-size: 14px; }
+h3 > .glyphicon-question-sign,
+.heading-help { font-size: 14px; }
 
 /* Create a class for wells without background colour */
 .well-transparent { background-color: transparent; }
@@ -205,6 +219,13 @@ td > .tooltip-inner,
 #recipestable .get_description_or_summary { width: 40%; }
 #machinestable .name { white-space: nowrap; }
 #machinestable .description { width: 45%; }
+#otable .variable_value,
+#otable .file { word-break: break-all; width: 25%; }
+[id^="variable-"] .file { word-break: break-all; }
+
+/* For the tables still not ported to ToasterTables, style the table headings
+ * that are not sortable */
+th > span.text-muted { font-weight: normal; }
 
 /* Override the rather ugly default code styles */
 code { color: #333; background-color: transparent; }
@@ -234,7 +255,7 @@ code { color: #333; background-color: transparent; }
 .date-filter-controls span { margin: 0 10px; }
 
 /* Style the fixed positioned notifications */
-.loading-notification { position: fixed; z-index: 101; top: 3%; left: 40%; right: 40%; -webkit-box-shadow: 0 
0 10px #c09853; -moz-box-shadow: 0 0 10px #c09853; box-shadow: 0 0 10px #c09853; } 
+#loading-notification { position: fixed; z-index: 1101; top: 3%; left: 40%; right: 40%; -webkit-box-shadow: 
0 0 10px #c09853; -moz-box-shadow: 0 0 10px #c09853; box-shadow: 0 0 10px #c09853; }
 
 .change-notification { position: fixed; z-index: 1101; top: 4%; left: 30%; right: 30%; -webkit-box-shadow: 0 
0 10px #3a87ad; -moz-box-shadow: 0 0 10px #3a87ad; box-shadow: 0 0 10px #3a87ad; }
 
@@ -246,3 +267,76 @@ code { color: #333; background-color: transparent; }
 
 /* Style the Toaster screenshot in the landing page */
 .img-thumbnail { padding: 0; }
+
+/* Set the layout for the build information pages */
+
+#nav { margin-top: 10px; }
+.page-header.build-data { margin-top: 0px; }
+.build-data > h1 { margin-top: 8px; }
+
+/* Style the build outcome information in the build dashboard */
+.log { margin-left: 30px; }
+.show-warnings { font-weight: 700; color: #8a6d3b; }
+.show-warnings:hover { color: #66512c; }
+
+/* Style the errors and warnings information in the build dashboard */
+#errors .panel-heading { background-color: transparent; color: #843534; }
+#warnings .panel-heading { background-color: transparent; color: #8a6d3b; }
+#warnings .panel-heading a:hover { color: #66512c; }
+h2.panel-title { font-size: 30px; }
+.alert-danger pre,
+.alert-warning pre { background-color: transparent; border: none; }
+.alert-danger pre { color: #a94442; }
+#error-info pre,
+#warning-info pre { white-space: pre-wrap; }
+.alert-warning pre { color: #8a6d3b; }
+
+/* Style the wells in the build dashboard */
+.dashboard-section h3 { margin-top: 10px; margin-bottom: 20px; }
+.col-md-4.dashboard-section dd { margin-bottom: 10px; }
+
+/* Make the help in tables insivisble until you hover over the right cell */
+.hover-help { visibility: hidden; }
+
+/* Blue hightlight animation for tasks and directory structure tables */
+.highlight { -webkit-animation: target-fade 15s 1; -moz-animation: target-fade 15s 1; animation: target-fade 
15s 1; }
+@-webkit-keyframes target-fade { 0% { background-color: #D9EDF7; } 25% { background-color: #D9EDF7; } 100% { 
background-color: white; } }
+@-moz-keyframes target-fade { 0% { background-color: #D9EDF7; } 25% { background-color: #D9EDF7; } 100% { 
background-color: white; } }
+@keyframes target-fade { 0% { background-color: #D9EDF7; } 25% { background-color: #D9EDF7; } 100% { 
background-color: white; } }
+
+/* Copied in from newer version of Font-Awesome 4.3.0 */
+.fa-spin {
+  -webkit-animation: fa-spin 2s infinite linear;
+  animation: fa-spin 2s infinite linear;
+  display: inline-block;
+}
+.fa-pulse {
+  -webkit-animation: fa-spin 1s infinite steps(8);
+  animation: fa-spin 1s infinite steps(8);
+  display: inline-block;
+}
+
+@-webkit-keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+
+@keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    -moz-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+/* End copied in from newer version of Font-Awesome 4.3.0 */
diff --git a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js 
b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
index e4e4f6c..eafe70d 100644
--- a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
+++ b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
@@ -541,9 +541,7 @@ $(document).ready(function() {
       delay: { show : 300 }
     });
 
-    // show help bubble only on hover inside tables
-    $(".hover-help").css("visibility","hidden");
-
+    // show help bubble on hover inside tables
     $("table").on("mouseover", "th, td", function () {
         $(this).find(".hover-help").css("visibility","visible");
     });
diff --git a/bitbake/lib/toaster/toastergui/templates/base.html 
b/bitbake/lib/toaster/toastergui/templates/base.html
index 73e4cd8..8a9f690 100644
--- a/bitbake/lib/toaster/toastergui/templates/base.html
+++ b/bitbake/lib/toaster/toastergui/templates/base.html
@@ -62,7 +62,7 @@
   <body>
 
     {% csrf_token %}
-    <div id="loading-notification" class="alert lead text-center" style="display:none">
+    <div id="loading-notification" class="alert alert-warning lead text-center" style="display:none">
       Loading <i class="fa-pulse icon-spinner"></i>
     </div>
 
diff --git a/bitbake/lib/toaster/toastergui/templates/basebuilddetailpage.html 
b/bitbake/lib/toaster/toastergui/templates/basebuilddetailpage.html
index 3a4c383..4d50667 100644
--- a/bitbake/lib/toaster/toastergui/templates/basebuilddetailpage.html
+++ b/bitbake/lib/toaster/toastergui/templates/basebuilddetailpage.html
@@ -5,21 +5,23 @@
 
 <div class="row">
   <!-- Breadcrumbs -->
-  <ul class="breadcrumb" id="breadcrumb">
-    <li><a href="{% project_url build.project %}">{{build.project.name}}</a></li>
-    {% if not build.project.is_default %}
-    <li><a href="{% url 'projectbuilds' build.project.id %}">Builds</a></li>
-    {% endif %}
-    <li><a href="{%url 'builddashboard' build.pk%}">{{build.get_sorted_target_list.0.target}} {%if 
build.target_set.all.count > 1%}(+{{build.target_set.all.count|add:"-1"}}){%endif%} {{build.machine}} 
({{build.completed_on|date:"d/m/y H:i"}})</a></li>
-    {% block localbreadcrumb %}{% endblock %}
-  </ul>
-  <script>
+       <div class="col-md-12">
+               <ul class="breadcrumb" id="breadcrumb">
+                       <li><a href="{% project_url build.project %}">{{build.project.name}}</a></li>
+                       {% if not build.project.is_default %}
+                       <li><a href="{% url 'projectbuilds' build.project.id %}">Builds</a></li>
+                       {% endif %}
+                       <li><a href="{%url 'builddashboard' 
build.pk%}">{{build.get_sorted_target_list.0.target}} {%if build.target_set.all.count > 
1%}(+{{build.target_set.all.count|add:"-1"}}){%endif%} {{build.machine}} ({{build.completed_on|date:"d/m/y 
H:i"}})</a></li>
+                       {% block localbreadcrumb %}{% endblock %}
+               </ul>
+               <script>
 $( function () {
-    $('#breadcrumb > li').append('<span class="divider">&rarr;</span>');
-    $('#breadcrumb > li:last').addClass("active");
-    $('#breadcrumb > li:last > span').remove();
-    });
-  </script>
+       $('#breadcrumb > li').append('<span class="divider">&rarr;</span>');
+       $('#breadcrumb > li:last').addClass("active");
+       $('#breadcrumb > li:last > span').remove();
+       });
+               </script>
+       </div>
 </div>
 
 <!-- Begin container -->
diff --git a/bitbake/lib/toaster/toastergui/templates/basebuildpage.html 
b/bitbake/lib/toaster/toastergui/templates/basebuildpage.html
index c002e42..d9adcd7 100644
--- a/bitbake/lib/toaster/toastergui/templates/basebuildpage.html
+++ b/bitbake/lib/toaster/toastergui/templates/basebuildpage.html
@@ -7,7 +7,7 @@
 
 <div class="row">
   <!-- breadcrumbs -->
-  <div class="section">
+  <div class="col-md-12">
     <ul class="breadcrumb" id="breadcrumb">
       <li><a href="{% project_url build.project %}">{{build.project.name}}</a></li>
       {% if not build.project.is_default %}
@@ -44,12 +44,12 @@
   <div class="row">
     <!-- begin left sidebar container -->
     <div id="nav" class="col-md-2">
-      <ul class="nav nav-list well" id="build-menu">
+      <ul class="nav nav-pills nav-stacked" id="build-menu">
         <li
           {% if request.resolver_match.url_name == 'builddashboard'  %}
             class="active"
           {% endif %} >
-          <a class="nav-parent" href="{% url 'builddashboard' build.pk %}">Build summary</a>
+          <a  href="{% url 'builddashboard' build.pk %}">Build summary</a>
         </li>
         {% if build.target_set.all.0.is_image and build.outcome == 0 %}
           <li class="nav-header">Images</li>
@@ -72,56 +72,42 @@
           <li><a href="{% url 'cputime' build.pk %}">CPU usage</a></li>
           <li><a href="{% url 'diskio' build.pk %}">Disk I/O</a></li>
 
-        <li class="divider"></li>
-
-        <li>
-          <p class="navbar-btn">
-            <a class="btn btn-block" href="{% url 'build_artifact' build.id 'cookerlog' build.id %}">
-              Download build log
-            </a>
-          </p>
-        </li>
+       <li class="nav-header">Actions</li>
+               <a class="btn btn-default btn-block navbar-btn" href="{% url 'build_artifact' build.id 
'cookerlog' build.id %}">Download build log</a>
 
         {% with build.get_custom_image_recipes as custom_image_recipes %}
           {% if custom_image_recipes.count > 0 %}
             <!-- edit custom image built during this build -->
-            <li>
-              <p class="navbar-btn" data-role="edit-custom-image-trigger">
-                <button class="btn btn-block">Edit custom image</button>
-                {% include 'editcustomimage_modal.html' %}
-                <script>
-                  var editableCustomImageRecipes = {{ custom_image_recipes | 
objects_to_dictionaries:"id,name" | json }};
+              <button class="btn btn-default btn-block navbar-btn" 
data-role="edit-custom-image-trigger">Edit custom image</button>
+              {% include 'editcustomimage_modal.html' %}
+              <script>
+                var editableCustomImageRecipes = {{ custom_image_recipes | objects_to_dictionaries:"id,name" 
| json }};
 
-                  $(document).ready(function () {
-                    var editCustomImageTrigger = $('[data-role="edit-custom-image-trigger"]');
-                    var editCustomImageModal = $('#edit-custom-image-modal');
+                $(document).ready(function () {
+                  var editCustomImageTrigger = $('[data-role="edit-custom-image-trigger"]');
+                  var editCustomImageModal = $('#edit-custom-image-modal');
 
-                    // edit custom image which was built during this build
-                    editCustomImageTrigger.click(function () {
-                      // single editable custom image: redirect to the edit page
-                      // for that image
-                      if (editableCustomImageRecipes.length === 1) {
-                        var url = '{% url "customrecipe" build.project.id custom_image_recipes.first.id %}';
-                        document.location.href = url;
-                      }
-                      // multiple editable custom images: show modal to select
-                      // one of them for editing
-                      else {
-                        editCustomImageModal.modal('show');
-                      }
-                    });
+                  // edit custom image which was built during this build
+                  editCustomImageTrigger.click(function () {
+                    // single editable custom image: redirect to the edit page
+                    // for that image
+                    if (editableCustomImageRecipes.length === 1) {
+                      var url = '{% url "customrecipe" build.project.id custom_image_recipes.first.id %}';
+                      document.location.href = url;
+                    }
+                    // multiple editable custom images: show modal to select
+                    // one of them for editing
+                    else {
+                      editCustomImageModal.modal('show');
+                    }
                   });
-                </script>
-              </p>
-            </li>
+                });
+              </script>
           {% endif %}
         {% endwith %}
 
-        <li>
           <!-- new custom image from image recipe in this build -->
-          <p class="navbar-btn" data-role="new-custom-image-trigger">
-            <button class="btn btn-block">New custom image</button>
-          </p>
+          <button class="btn btn-default btn-block navbar-btn" data-role="new-custom-image-trigger">New 
custom image</button>
           {% include 'newcustomimage_modal.html' %}
           <script>
             // imageRecipes includes both custom image recipes and built-in
@@ -145,7 +131,6 @@
               });
             });
           </script>
-        </li>
       </ul>
 
     </div>
diff --git a/bitbake/lib/toaster/toastergui/templates/basetable_bottom.html 
b/bitbake/lib/toaster/toastergui/templates/basetable_bottom.html
index 96f405c..a2011fa 100644
--- a/bitbake/lib/toaster/toastergui/templates/basetable_bottom.html
+++ b/bitbake/lib/toaster/toastergui/templates/basetable_bottom.html
@@ -2,7 +2,7 @@
     </table>
 
 <!-- Show pagination controls -->
-<div>
+<div id="pagination-basetable_bottom">
    <!--span class="help-inline">Showing {{objects.start_index}} to {{objects.end_index}} out of 
{{objects.paginator.count}} entries.</span-->
 
    <ul class="pagination">
@@ -20,16 +20,18 @@
   <li class="disabled"><a href="#">&raquo;</a></li>
 {%endif%}
   </ul>
-  <div class="pull-right">
-    <span class="help-inline">Show rows:</span>
-    <select class="pagesize">
-      {% with "10 25 50 100 150" as list%}
+  <form class="navbar-form navbar-right">
+    <div class="form-group">
+      <label>Show rows:</label>
+      <select class="form-control pagesize">
+        {% with "10 25 50 100 150" as list%}
         {% for i in list.split %}
-            <option value="{{i}}">{{i}}</option>
+        <option value="{{i}}">{{i}}</option>
         {% endfor %}
-      {% endwith %}
-    </select>
-   </div>
+        {% endwith %}
+      </select>
+    </div>
+  </form>
 </div>
 
 <!-- Update page display settings -->
diff --git a/bitbake/lib/toaster/toastergui/templates/basetable_top.html 
b/bitbake/lib/toaster/toastergui/templates/basetable_top.html
index 6731ff2..5a9076d 100644
--- a/bitbake/lib/toaster/toastergui/templates/basetable_top.html
+++ b/bitbake/lib/toaster/toastergui/templates/basetable_top.html
@@ -159,68 +159,83 @@
     </script>
 
 <!-- control header -->
-<div class="navbar">
-    <div class="navbar-inner">
-        <form class="navbar-search" id="searchform">
-          <div class="input-append">
-            <input id="search" name="search" type="text" placeholder="Search {%if object_search_display 
%}{{object_search_display}}{%else%}{{objectname}}{%endif%}" value="{%if request.GET.search 
%}{{request.GET.search}}{% endif %}"/>{% if request.GET.search %}<a 
href="javascript:$('#search').val('');searchform.submit()" class="input-append-addon btn" tabindex="-1"><i 
class="glyphicon glyphicon-remove"></i></a>{%endif%}
-            <input type="hidden" name="orderby" value="{{request.GET.orderby}}">
-            <input type="hidden" name="page" value="1">
-            <button class="btn" id="search-button" type="submit" value="Search">Search</button>
+<div class="navbar navbar-default">
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
data-target="#table-chrome-collapse-variablehistory" aria-expanded="false">
+        <span class="sr-only">Toggle table options</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+    </div>
+    <div class="collapse navbar-collapse" id="table-chrome-collapse-variablehistory">
+      <form class="navbar-form navbar-left" id="searchform">
+        <div class="form-group">
+          <div class="btn-group">
+            <input class="form-control" id="search" name="search" type="text" placeholder="Search {%if 
object_search_display %}{{object_search_display}}{%else%}{{objectname}}{%endif%}" value="{%if 
request.GET.search %}{{request.GET.search}}{% endif %}"/>
+            {% if request.GET.search %}<a href="javascript:$('#search').val('');searchform.submit()" 
tabindex="-1"><span class="remove-search-btn-variables glyphicon glyphicon-remove-circle"></span></a>{%endif%}
           </div>
-        </form>
-        <div class="pull-right">
-{% if tablecols %}
-            <div class="btn-group">
-                <button id="edit-columns-button" class="btn dropdown-toggle" data-toggle="dropdown">Edit 
columns
-                    <span class="caret"></span>
-                </button>
+        </div>
+        <input type="hidden" name="orderby" value="{{request.GET.orderby}}">
+        <input type="hidden" name="page" value="1">
+        <button class="btn btn-default" id="search-button" type="submit" value="Search">Search</button>
+      </form>
+      <form class="navbar-form navbar-right">
+        <div class="form-group">
+          <label>Show rows:</label>
+          <select class="pagesize form-control">
+            {% with "10 25 50 100 150" as list%}
+            {% for i in list.split %}
+            <option value="{{i}}">{{i}}</option>
+            {% endfor %}
+            {% endwith %}
+          </select>
+        </div>
+      </form>
+
+      <div class="btn-group navbar-right">
+                               {% if tablecols %}
+                                       <button id="edit-columns-button" class="btn btn-default navbar-btn 
dropdown-toggle" data-toggle="dropdown">Edit columns
+                                               <span class="caret"></span>
+                                       </button>
 <!--
        {{tablecols|sortcols}}
 -->
-                <ul id='editcol' class="dropdown-menu">
-                  {% for i in tablecols|sortcols %}
-                    <li>
-                        <label {% if not i.clclass %} class="checkbox muted" {%else%} class="checkbox" 
{%endif%}>
-                            <input type="checkbox" class="chbxtoggle"
-                                   {% if i.clclass %}
+        <ul id="editcol" class="dropdown-menu editcol">
+          {% for i in tablecols|sortcols %}
+          <li>
+            <div class="checkbox">
+              <label {% if not i.clclass %} class="muted" {%endif%}>
+                <input type="checkbox" class="chbxtoggle"
+                                       {% if i.clclass %}
                                        id="{{i.clclass}}"
                                        value="ct{{i.name}}"
                                        {% if not i.hidden %}
-                                           checked="checked"
+                                       checked="checked"
                                        {%endif%}
                                        onclick="showhideTableColumn(
-                                           $(this).attr('id'),
-                                           $(this).is(':checked'),
-                                           {% if i.ordericon %}
-                                              '{{i.orderkey}}'
-                                           {% else %}
-                                              undefined
-                                           {% endif %}
+                                       $(this).attr('id'),
+                                       $(this).is(':checked'),
+                                       {% if i.ordericon %}
+                                       '{{i.orderkey}}'
+                                       {% else %}
+                                       undefined
+                                       {% endif %}
                                        )"
-                                   {%else%}
+                                       {%else%}
                                        checked disabled
-                                   {% endif %}/>   {{i.name}}
-                        </label>
-                    </li>
-                  {% endfor %}
-                </ul>
+                                       {% endif %}/>{{i.name}}
+              </label>
             </div>
-{% endif %}
-            <div style="display:inline">
-                <span class="divider-vertical"></span>
-                <span class="help-inline" style="padding-top:5px;">Show rows:</span>
-                <select style="margin-top:5px;margin-bottom:0px;" class="pagesize">
-                  {% with "10 25 50 100 150" as list%}
-                    {% for i in list.split %}
-                        <option value="{{i}}">{{i}}</option>
-                    {% endfor %}
-                  {% endwith %}
-                </select>
-           </div>
-        </div>
-    </div> <!-- navbar-inner -->
-</div>
+          </li>
+          {% endfor %}
+        </ul>
+        {% endif %}
+      </div>
+    </div> <!-- navbar-collapse -->
+       </div> <!-- container-fluid -->
+</div> <!-- navbar-default -->
 
 <!-- the actual rows of the table -->
     <table class="table table-bordered table-hover tablesorter" id="otable">
@@ -228,11 +243,11 @@
         <!-- Table header row; generated from "tablecols" entry in the context dict -->
         <tr>
             {% for tc in tablecols %}<th class="{%if tc.dclass%}{{tc.dclass}}{%endif%} {% if tc.clclass 
%}{{tc.clclass}}{% endif %}">
-                {%if tc.qhelp%}<i class="icon-question-sign get-help" title="{{tc.qhelp}}"></i>{%endif%}
-                {%if tc.orderfield%}<a {%if tc.ordericon%} class="sorted" 
{%endif%}href="javascript:reload_params({'page': 1, 'orderby' : '{{tc.orderfield}}' 
})">{{tc.name}}</a>{%else%}<span class="muted">{{tc.name}}</span>{%endif%}
+                {%if tc.qhelp%}<span class="glyphicon glyphicon-question-sign get-help" 
title="{{tc.qhelp}}"></span>{%endif%}
+                {%if tc.orderfield%}<a {%if tc.ordericon%} class="sorted" 
{%endif%}href="javascript:reload_params({'page': 1, 'orderby' : '{{tc.orderfield}}' 
})">{{tc.name}}</a>{%else%}<span class="text-muted">{{tc.name}}</span>{%endif%}
                 {%if tc.ordericon%} <i class="icon-caret-{{tc.ordericon}}"></i>{%endif%}
                 {%if tc.filter%}<div class="btn-group pull-right">
-                    <a href="#filter_{{tc.filter.class}}" role="button" class="btn btn-mini {%if 
request.GET.filter%}{{tc.filter.options|filtered_icon:request.GET.filter}} {%endif%}" {%if request.GET.filter 
and tc.filter.options|filtered_tooltip:request.GET.filter %} 
title="<p>{{tc.filter.options|filtered_tooltip:request.GET.filter}}</p><p><a class='btn btn-sm btn-primary' 
href=javascript:reload_params({'filter':''})>Show all {% if filter_search_display 
%}{{filter_search_display}}{% else %}{{objectname}}{% endif %}</a></p>" {%endif%} data-toggle="modal"> <i 
class="glyphicon glyphicon-filter filtered"></i> </a>
+                    <a href="#filter_{{tc.filter.class}}" role="button" class="btn btn-xs {%if 
request.GET.filter%}{{tc.filter.options|filtered_icon:request.GET.filter}} {%endif%}" {%if request.GET.filter 
and tc.filter.options|filtered_tooltip:request.GET.filter %} 
title="<p>{{tc.filter.options|filtered_tooltip:request.GET.filter}}</p><p><a class='btn btn-sm btn-primary' 
href=javascript:reload_params({'filter':''})>Show all {% if filter_search_display 
%}{{filter_search_display}}{% else %}{{objectname}}{% endif %}</a></p>" {%endif%} data-toggle="modal"> <span 
class="glyphicon glyphicon-filter filtered"></span> </a>
                 </div>{%endif%}
             </th>{% endfor %}
         </tr>
diff --git a/bitbake/lib/toaster/toastergui/templates/builddashboard.html 
b/bitbake/lib/toaster/toastergui/templates/builddashboard.html
index f33757e..04a57ef 100644
--- a/bitbake/lib/toaster/toastergui/templates/builddashboard.html
+++ b/bitbake/lib/toaster/toastergui/templates/builddashboard.html
@@ -14,57 +14,49 @@
 {% block buildinfomain %}
 <!-- page title -->
 <div class="col-md-10">
- <div class="page-header">
+ <div class="page-header build-data">
      <h1>{{build.target_set.all|dictsort:"target"|join:", "}} {{build.machine}}</h1>
  </div>
 
 <!-- build result bar -->
-  <div class="alert {%if build.outcome == build.SUCCEEDED%}alert-success{%elif build.outcome == 
build.FAILED%}alert-error{%else%}alert-info{%endif%}">
-    <div class="lead">
-            <span><strong>
-                {%if build.outcome == build.SUCCEEDED%}Completed{%elif build.outcome == 
build.FAILED%}Failed{%else%}{%endif%}
-              </strong> on
-            {{build.completed_on|date:"d/m/y H:i"}}
-</span>
-{% if  build.warnings.count or build.errors.count %}
-&nbsp;with
-{% endif %}
-{%if build.outcome == build.SUCCEEDED or build.outcome == build.FAILED %}
-{% if  build.errors.count %}
-     <span > <i class="icon-minus-sign red"></i><strong><a href="#errors" class="error show-errors"> 
{{build.errors.count}} error{{build.errors.count|pluralize}}</a></strong></span>
-{% endif %}
-{% if  build.warnings.count %}
-{% if  build.errors.count %}
-    and
-{% endif %}
-    <span > <i class="icon-warning-sign yellow"></i><strong><a href="#warnings" class="warning 
show-warnings"> {{build.warnings.count}} warning{{build.warnings.count|pluralize}}</a></strong></span>
-{% endif %}
-            <span class="pull-right">Build time: <a href="{% url 'buildtime' build.pk %}">{{ 
build.timespent_seconds|sectohms }}</a>
-            {% if build.cooker_log_path %}
-                <a class="btn {%if build.outcome == build.SUCCEEDED%}btn-success{%else%}btn-danger{%endif%} 
pull-right log" href="{% url 'build_artifact' build.id "cookerlog" build.id %}">Download build log</a>
-            {% endif %}
-            </span>
-
-{%endif%}
-    </div>
-  </div>
+  <div class="alert {%if build.outcome == build.SUCCEEDED%}alert-success{%elif build.outcome == 
build.FAILED%}alert-danger{%else%}alert-info{%endif%}">
+               <span><strong>{%if build.outcome == build.SUCCEEDED%}Completed{%elif build.outcome == 
build.FAILED%}Failed{%else%}{%endif%}</strong> on {{build.completed_on|date:"d/m/y H:i"}}</span>
+               {% if  build.warnings.count or build.errors.count %}
+               <span>with</span>
+               {% endif %}
+               {%if build.outcome == build.SUCCEEDED or build.outcome == build.FAILED %}
+                       {% if  build.errors.count %}
+                       <a href="#errors" class="alert-link show-errors"> {{build.errors.count}} 
error{{build.errors.count|pluralize}}</a>
+                       {% endif %}
+                       {% if  build.warnings.count %}
+                               {% if  build.errors.count %}and{% endif %}
+                               <a href="#warnings" class="show-warnings"> {{build.warnings.count}} 
warning{{build.warnings.count|pluralize}}</a>
+                       {% endif %}
+                       {% if build.cooker_log_path %}
+                       <a class="alert-link pull-right log" href="{% url 'build_artifact' build.id 
"cookerlog" build.id %}">Download build log</a>
+                       {% endif %}
+                       <span class="pull-right">
+                               Build time:
+                               <a class="alert-link" href="{% url 'buildtime' build.pk %}">{{ 
build.timespent_seconds|sectohms }}</a>
+                       </span>
+               {%endif%}
+</div>
 
 {% if build.errors.count %}
-<div class="panel-group" id="errors">
-  <div class="panel panel-default">
+  <div class="panel panel-default" id="errors">
     <div class="panel-heading">
-      <a class="panel-title error toggle-errors" href="#">
-         <h2 id="error-toggle">
-           <i class="icon-minus-sign"></i>
+      <h2 class="panel-title">
+         <span class="glyphicon glyphicon-minus-sign"></span>
+         <a data-toggle="collapse" href="#error-info" id="error-toggle">
            {{build.errors.count}} error{{build.errors.count|pluralize}}
-         </h2>
-      </a>
+         </a>
+      </h2>
     </div>
-    <div class="panel-collapse collapse in" id="collapse-errors">
+    <div class="panel-collapse collapse in" id="error-info">
       <div class="panel-body">
         <div class="col-md-10">
           {% for error in build.errors %}
-            <div class="alert alert-error" data-error="{{ error.id }}">
+            <div class="alert alert-danger" data-error="{{ error.id }}">
               <pre>{{error.message}}</pre>
             </div>
           {% endfor %}
@@ -72,7 +64,6 @@
       </div>
     </div>
   </div>
-</div>
 {% endif %}
 
 {%if build.outcome == build.SUCCEEDED%}
@@ -81,9 +72,8 @@
     <h2>Images</h2>
     {% for target in targets %}
         {% if target.target.is_image %}
-    <div class="well dashboard-section">
-        <h3><a href="{% url 'target' build.pk target.target.pk %}">{{target.target}}</a>
-                </h3>
+    <div class="well well-transparent dashboard-section">
+        <h3><a href="{% url 'target' build.pk target.target.pk %}">{{target.target}}</a></h3>
         <dl class="dl-horizontal">
             <dt>Packages included</dt>
             <dd><a href="{% url 'target' build.pk target.target.pk %}">{{target.npkg}}</a></dd>
@@ -100,7 +90,7 @@
                       <p>
                       This is probably because valid image and license manifest
                       files from a previous build already exist in your
-                      <code>.../poky/build/tmp/deploy</code>
+                      <code>build/tmp/deploy</code>
                       directory. You can
                       also <a href="{% url 'target' build.pk target.target.pk %}">view the
                         license manifest information</a> in Toaster.
@@ -110,7 +100,7 @@
                 </div>
         {% else %}
             <dt>
-                <i class="icon-question-sign get-help" title="The location in disk of the license manifest, 
a document listing all packages installed in your image and their licenses"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The location in disk of the 
license manifest, a document listing all packages installed in your image and their licenses"></span>
 
                 License manifest
             </dt>
@@ -118,11 +108,11 @@
                 <a href="{% url 'target' build.pk target.target.pk %}">View in Toaster</a> |
                 <a href="{% url 'build_artifact' build.pk 'licensemanifest' target.target.pk 
%}">Download</a></dd>
             <dt>
-                <i class="icon-question-sign get-help" title="Image files are stored in 
<code>/build/tmp/deploy/images/</code>"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="Image files are stored in 
<code>build/tmp/deploy/images/</code>"></span>
                 Image files
             </dt>
             <dd>
-                <ul>
+                <ul class="list-unstyled">
                     {% for i in target.imageFiles %}
                         <li>
                             <a href="{% url 'build_artifact' build.pk 'imagefile' i.id %}">
@@ -148,10 +138,10 @@
 {% if build.buildartifact_set.all.count > 0 %}
 <h2>Other artifacts</h2>
 
-    <div class="well dashboard-section">
+    <div class="well well-transparent dashboard-section">
         <dl class="dl-horizontal">
             <dt>
-                <i class="icon-question-sign get-help" title="Build artifacts discovered in 
<i>tmp/deploy/images</i>. Usually kernel images and kernel modules."></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="Build artifacts discovered 
in <i>tmp/deploy/images</i>. Usually kernel images and kernel modules."></span>
                 Other artifacts</dt>
             <dd><div>
               {% for ba in build.buildartifact_set.all|dictsort:"file_name" %}
@@ -172,51 +162,51 @@
   <div class="row">
     <div class="col-md-4 dashboard-section">
       <div class="well well-transparent">
-        <h4><a href="{%url 'configuration' build.pk%}">Configuration</a></h4>
+        <h3><a href="{%url 'configuration' build.pk%}">Configuration</a></h3>
             <dl>
         <dt>Machine</dt><dd>{{build.machine}}</dd>
         <dt>Distro</dt><dd>{{build.distro}}</dd>
-        <dt>Layers</dt>{% for i in build.layer_version_build.all|dictsort:"layer.name" 
%}<dd>{{i.layer.name}}</dd>{%endfor%}
+        <dt>Layers</dt><dd><ul class="list-unstyled">{% for i in 
build.layer_version_build.all|dictsort:"layer.name" %}<li>{{i.layer.name}}</li>{%endfor%}</ul></dd>
             </dl>
       </div>
     </div>
     <div class="col-md-4 dashboard-section">
       <div class="well well-transparent">
-        <h4><a href="{%url 'tasks' build.pk%}">Tasks</a></h4>
+        <h3><a href="{%url 'tasks' build.pk%}">Tasks</a></h3>
             <dl>
             {% query build.task_build outcome=4 order__gt=0 as exectask%}
             {% if exectask.count > 0 %}
                 <dt>Failed tasks</dt>
                 <dd>
                 {% if exectask.count == 1 %}
-                    <a class="error" href="{% url "task" build.id exectask.0.id %}">
+                    <a class="text-danger" href="{% url "task" build.id exectask.0.id %}">
                         {{exectask.0.recipe.name}}
                         <span class="task-name">{{exectask.0.task_name}}</span>
                     </a>
 
                         <a href="{% url 'build_artifact' build.id "tasklogfile" exectask.0.id %}">
-                            <i class="icon-download-alt" title="" data-original-title="Download task log 
file"></i>
+                            <span class="glyphicon glyphicon-download-alt get-help" title="Download task log 
file"></i>
                         </a>
 
                 {% elif exectask.count > 1%}
-                    <a class="error" href="{% url "tasks" build.id 
%}?filter=outcome%3A4">{{exectask.count}}</a>
+                    <a class="text-danger" href="{% url "tasks" build.id 
%}?filter=outcome%3A4">{{exectask.count}}</a>
                 {% endif %}
                 </dd>
             {% endif %}
         <dt>Total number of tasks</dt><dd><a href="{% url 'tasks' build.pk %}">{% query build.task_build 
order__gt=0 as alltasks %}{{alltasks.count}}</a></dd>
         <dt>
             Tasks executed
-            <i class="icon-question-sign get-help" title="'Executed' tasks are those that need to be run in 
order to generate the task output"></i>
+            <span class="glyphicon glyphicon-question-sign get-help" title="'Executed' tasks are those that 
need to be run in order to generate the task output"></span>
         </dt>
         <dd><a href="{% url 'tasks' build.pk 
%}?filter=task_executed%3A1&amp;count=25&amp;search=&amp;page=1&amp;orderby=order%3A%2B">{% query 
build.task_build task_executed=1 order__gt=0 as exectask%}{{exectask.count}}</a></dd>
         <dt>
             Tasks not executed
-            <i class="icon-question-sign get-help" title="'Not executed' tasks don't need to run because 
their outcome is provided by another task"></i>
+            <span class="glyphicon glyphicon-question-sign get-help" title="'Not executed' tasks don't need 
to run because their outcome is provided by another task"></span>
         </dt>
         <dd><a href="{% url 'tasks' build.pk 
%}?filter=task_executed%3A0&amp;count=25&amp;search=&amp;page=1&amp;orderby=order%3A%2B">{% query 
build.task_build task_executed=0 order__gt=0 as noexectask%}{{noexectask.count}}</a></dd>
         <dt>
             Reuse
-            <i class="icon-question-sign get-help" title="The percentage of 'not executed' tasks over the 
total number of tasks, which is a measure of the efficiency of your build"></i>
+            <span class="glyphicon glyphicon-question-sign get-help" title="The percentage of 'not executed' 
tasks over the total number of tasks, which is a measure of the efficiency of your build"></span>
         </dt>
         <dd>
 {% query build.task_build order__gt=0 as texec %}
@@ -232,7 +222,7 @@
     </div>
     <div class="col-md-4 dashboard-section">
       <div class="well well-transparent">
-        <h4><a href="{% url 'recipes' build.pk %}">Recipes</a> & <a href="{% url 'packages' build.pk 
%}">Packages</a></h4>
+        <h3><a href="{% url 'recipes' build.pk %}">Recipes</a> & <a href="{% url 'packages' build.pk 
%}">Packages</a></h3>
             <dl>
         <dt>Recipes built</dt><dd><a href="{% url 'recipes' build.pk %}">{{recipecount}}</a></dd>
         <dt>Packages built</dt><dd><a href="{% url 'packages' build.pk %}">{{packagecount}}</a></dd>
@@ -242,17 +232,14 @@
 </div>
 
 {% if build.warnings.count %}
-<div class="panel-group" id="warnings">
-  <div class="panel panel-default">
+  <div class="panel panel-default" id="warnings">
     <div class="panel-heading">
-      <a class="panel-title warning toggle-warnings" href="#">
-        <h2 id="warning-toggle">
-          <i class="icon-warning-sign"></i>
-          {{build.warnings.count}} warning{{build.warnings.count|pluralize}}
-        </h2>
-      </a>
+      <h2 class="panel-title">
+          <span class="glyphicon glyphicon-warning-sign"></span>
+          <a id="warning-toggle" href="#warning-info" data-toggle="collapse">{{build.warnings.count}} 
warning{{build.warnings.count|pluralize}}</a>
+      </h2>
     </div>
-    <div class="panel-collapse collapse" id="collapse-warnings">
+    <div class="panel-collapse collapse" id="warning-info">
       <div class="panel-body">
         <div class="col-md-10">
           {% for warning in logmessages %}{% if warning.level == 1 %}
@@ -264,7 +251,6 @@
       </div>
     </div>
   </div>
-</div>
 {% endif %}
 
 </div> <!-- end 10 column row -->
@@ -273,8 +259,13 @@
     $(document).ready(function() {
         //show warnings section when requested from the previous page
         if (location.href.search('#warnings') > -1) {
-            $('#collapse-warnings').addClass('in');
+            $('#warning-info').addClass('in');
         }
+       
+       //show warnings section when requested from the build outcome
+       $(".show-warnings").click(function() {
+           $('#warning-info').addClass('in');
+       });
     });
 </script>
 
diff --git a/bitbake/lib/toaster/toastergui/templates/configuration.html 
b/bitbake/lib/toaster/toastergui/templates/configuration.html
index 83bc5b2..1032ebe 100644
--- a/bitbake/lib/toaster/toastergui/templates/configuration.html
+++ b/bitbake/lib/toaster/toastergui/templates/configuration.html
@@ -14,13 +14,13 @@
 <!-- page title -->
 <div class="col-md-10">
 
- <div class="page-header">
+ <div class="page-header build-data">
      <h1>Configuration</h1>
  </div>
 
 <!-- configuration table -->
 <div id="navTab">
-<ul class="nav nav-pills">
+<ul class="nav nav-tabs">
     <li class="active"><a href="#">Summary</a></li>
     <li class=""><a href="{% url 'configvars' build.id %}">BitBake variables</a></li>
 </ul>
@@ -39,13 +39,13 @@
       {%if TUNE_FEATURES %}<dt>Tune features</dt><dd>{{TUNE_FEATURES}}</dd> {% endif %}
       {%if TARGET_FPU %}<dt>Target FPU</dt><dd>{{TARGET_FPU}}</dd> {% endif %}
       {%if targets.all %}<dt>Target(s)</dt>
-          <dd> <ul> {% for target in targets.all %}
+          <dd> <ul class="list-unstyled"> {% for target in targets.all %}
                <li>{{target.target}}{%if forloop.counter > 1 %}<br>{% endif %}</li>
           {% endfor %} </ul> </dd> {% endif %}
     </dl>
     <h3>Layers</h3>
     <div class="row">
-      <div class="col-md-9">
+      <div class="col-md-9 table-responsive">
         <table class="table table-bordered table-hover">
           <thead>
             <tr>
@@ -58,7 +58,7 @@
           <tr>
             <td>{{lv.layer.name}}</td>
             <td>{{lv.branch}}</td>
-            <td> <a class="btn" data-content="<ul class='list-unstyled'>
+            <td> <a class="btn btn-default" data-content="<ul class='list-unstyled'>
                   <li>{{lv.commit}}</li> </ul>">
                 {{lv.commit|truncatechars:13}}
             </a></td>
diff --git a/bitbake/lib/toaster/toastergui/templates/configvars.html 
b/bitbake/lib/toaster/toastergui/templates/configvars.html
index f100b24..89d2fa4 100644
--- a/bitbake/lib/toaster/toastergui/templates/configvars.html
+++ b/bitbake/lib/toaster/toastergui/templates/configvars.html
@@ -13,7 +13,7 @@
 {% block buildinfomain %}
 <!-- page title -->
 <div class="col-md-10">
- <div class="page-header">
+ <div class="page-header build-data">
  <h1>
   {% if request.GET.filter and objects.paginator.count > 0 or request.GET.search and objects.paginator.count 
0 %}
       {{objects.paginator.count}} variable{{objects.paginator.count|pluralize}} found
@@ -27,7 +27,7 @@
 
 <!-- configuration table -->
 <div id="navTab">
-  <ul class="nav nav-pills">
+  <ul class="nav nav-tabs">
     <li class=""><a href="{% url 'configuration' build.id %}">Summary</a></li>
     <li class="active"><a href="#" >BitBake variables</a></li>
   </ul>
@@ -36,13 +36,22 @@
   <div id="variables" class="tab-pane">
 
   {% if objects.paginator.count == 0 %}
-    <div class="alert">
-      <form class="no-results input-append" id="searchform">
-          <input id="search" name="search" class="input-xxlarge" type="text" value="{% if request.GET.search 
%}{{request.GET.search}}{% endif %}"/>{% if request.GET.search %}<a 
href="javascript:$('#search').val('');searchform.submit()" class="input-append-addon btn" tabindex="-1"><i 
class="glyphicon glyphicon-remove"></i></a>{% endif %}
-          <button class="btn" type="submit" value="Search">Search</button>
-          <button class="btn btn-link" onclick="javascript:$('#search').val('');searchform.submit()">Show 
all variables</button>
-      </form>
-    </div>
+  <div class="alert alert-warning">
+    <form class="no-results form-inline" id="searchform">
+      <div class="form-group">
+        <div class="btn-group">
+          <input class="form-control" id="search" name="search" type="text" value="{% if request.GET.search 
%}{{request.GET.search}}{% endif %}"/>
+          {% if request.GET.search %}
+          <a href="javascript:$('#search').val('');searchform.submit()" tabindex="-1">
+            <span class="remove-search-btn-variables glyphicon glyphicon-remove-circle"></span>
+          </a>
+          {% endif %}
+        </div>
+      </div>
+      <button class="btn btn-default" type="submit" value="Search">Search</button>
+      <button class="btn btn-link" onclick="javascript:$('#search').val('');searchform.submit()">Show all 
variables</button>
+    </form>
+  </div>
 
   {% else %}
   {% include "basetable_top.html" %}
@@ -50,83 +59,87 @@
   {% for variable in objects %}
     <tr class="data">
         <td class="variable_name"><a data-toggle="modal" 
href="#variable-{{variable.pk}}">{{variable.variable_name}}</a></td>
-        <td class="variable_value"><a data-toggle="modal" 
href="#variable-{{variable.pk}}">{{variable.variable_value|truncatechars:153}}</a></td>
-        <td class="file"><a data-toggle="modal" href="#variable-{{variable.pk}}">
+        <td class="variable_value">{{variable.variable_value|truncatechars:153}}</td>
+        <td class="file">
             {% if variable.vhistory.all %}
                 {% for path in variable.vhistory.all|filter_setin_files:file_filter %}
                     {{path}}<br/>
                 {% endfor %}
             {% endif %}
-        </a></td>
+        </td>
         <td class="description">
             {% if variable.description %}
                 {{variable.description}}
                 <a 
href="http://www.yoctoproject.org/docs/current/ref-manual/ref-manual.html#var-{{variable.variable_name|variable_parent_name}}"
 target="_blank">
-                <i class="glyphicon glyphicon-share get-info"></i></a>
+                <span class="glyphicon glyphicon-new-window get-info"></span></a>
             {% endif %}
         </td>
     </tr>
 {% endfor %}
-
+</tbody>
+</table>
+</div> <!-- table-responsive -->
 {% include "basetable_bottom.html" %}
 {% endif %}
 </div> <!-- endvariables -->
 
 <!-- file list popups -->
 {% for variable in objects %}
-    {% if variable.vhistory.count %}
-    <div id="variable-{{variable.pk}}" class="modal in fade" tabindex="-1" role="dialog">
-      <div class="modal-dialog">
-       <div class="modal-content">
-         <div class="modal-header">
-           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
-           <h3>History of {{variable.variable_name}}</h3>
-         </div>
-         <div class="modal-body">
-           {% if variable.variable_value %}
-           {% if variable.variable_value|length < 570 %}
-           <h4>{{variable.variable_name}} value is:</h4>
-           <p>
-           {{variable.variable_value}}
-           </p>
-           {% else %}
-           <h4>{{variable.variable_name}} value is:</h4>
-           <p>
-           <span>{{variable.variable_value|string_slice:':570'}}
-             <span class="full"> {{variable.variable_value|string_slice:'570:'}}
-             </span>
-             <a class="btn btn-mini full-show">...</a>
-           </span>
-           </p>
-           <a class="btn btn-mini full-hide">Collapse variable value <i class="icon-caret-up"></i>
-           </a>
-           {% endif %}
-           {% else %}
-           <div class="alert alert-info">The value of <strong>{{variable.variable_name}}</strong> is an 
empty string</div>
-           {% endif %}
-           <h4>The value was set in the following configuration files:</h4>
-           <table class="table table-bordered table-hover">
-             <thead>
-               <tr>
-                 <th>Order</th>
-                 <th>Configuration file</th>
-                 <th>Operation</th>
-                 <th>Line number</th>
-               </tr>
-             </thead>
-             <tbody>
-               {% for vh in variable.vhistory.all %}
-               <tr>
-                 
<td>{{forloop.counter}}</td><td>{{vh.file_name}}</td><td>{{vh.operation}}</td><td>{{vh.line_number}}</td>
-               </tr>
-               {%endfor%}
-             </tbody>
-           </table>
-         </div>
-       </div><!-- /.modal-content -->
-      </div><!-- /.modal-dialog -->
-    </div><!-- /.modal -->
-    {% endif %}
+{% if variable.vhistory.count %}
+<div id="variable-{{variable.pk}}" class="modal fade" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
+        <h3>History of {{variable.variable_name}}</h3>
+      </div>
+      <div class="modal-body">
+        {% if variable.variable_value %}
+        {% if variable.variable_value|length < 570 %}
+        <h4>{{variable.variable_name}} value is:</h4>
+        <p>
+        {{variable.variable_value}}
+        </p>
+        {% else %}
+        <h4>{{variable.variable_name}} value is:</h4>
+        <p>
+        <span>{{variable.variable_value|string_slice:':570'}}
+          <span class="full"> {{variable.variable_value|string_slice:'570:'}}
+          </span>
+          <a href="#" class="full-show">...</a>
+        </span>
+        </p>
+        <a href="#" class="full-hide">Collapse variable value <i class="icon-caret-up"></i>
+        </a>
+        {% endif %}
+        {% else %}
+        <div class="alert alert-info">The value of <strong>{{variable.variable_name}}</strong> is an empty 
string</div>
+        {% endif %}
+        <h4>The value was set in the following configuration files:</h4>
+        <div class="table-responsive">
+          <table class="table table-bordered table-hover">
+            <thead>
+              <tr>
+                <th>Order</th>
+                <th>Configuration file</th>
+                <th>Operation</th>
+                <th>Line</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for vh in variable.vhistory.all %}
+              <tr>
+                <td>{{forloop.counter}}</td><td 
class="file">{{vh.file_name}}</td><td>{{vh.operation}}</td><td>{{vh.line_number}}</td>
+              </tr>
+              {%endfor%}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+{% endif %}
 {% endfor %}
 
 </div> <!-- buildinfomain -->
diff --git a/bitbake/lib/toaster/toastergui/templates/customrecipe.html 
b/bitbake/lib/toaster/toastergui/templates/customrecipe.html
index d904961..f2a8fd2 100644
--- a/bitbake/lib/toaster/toastergui/templates/customrecipe.html
+++ b/bitbake/lib/toaster/toastergui/templates/customrecipe.html
@@ -158,7 +158,7 @@
     <div class="well">
       <h2>About {{recipe.name}}</h2>
 
-      <dl>
+      <dl class="item-info">
         <dt>
         Approx. packages included
         <span class="glyphicon glyphicon-question-sign get-help" title="" data-original-title="The number of 
packages included is based on information from previous builds and from parsing layers, so we can never be 
sure it is 100% accurate"></span>
diff --git a/bitbake/lib/toaster/toastergui/templates/detail_pagination_bottom.html 
b/bitbake/lib/toaster/toastergui/templates/detail_pagination_bottom.html
index 211548b..15adfbc 100644
--- a/bitbake/lib/toaster/toastergui/templates/detail_pagination_bottom.html
+++ b/bitbake/lib/toaster/toastergui/templates/detail_pagination_bottom.html
@@ -6,7 +6,7 @@
 
 {# only paginate if 10 or more rows unfiltered, all pages #}
 {% if object_count >= 10 %}
-<div>
+<div id="pagination-detail">
   <ul class="pagination">
 {%if objects.has_previous %}
     <li><a href="javascript:reload_params({'page':{{objects.previous_page_number}}})">&laquo;</a></li>
@@ -23,16 +23,18 @@
 {%endif%}
   </ul>
 
-  <div class="pull-right">
-    <span class="help-inline">Show rows:</span>
-    <select class="pagesize">
-      {% with "10 25 50 100 150" as list%}
+  <form class="navbar-form navbar-right">
+    <div class=form-group">
+      <label>Show rows:</label>
+      <select class="pagesize form-control">
+        {% with "10 25 50 100 150" as list%}
         {% for i in list.split %}
-          <option value="{{i}}">{{i}}</option>
+        <option value="{{i}}">{{i}}</option>
         {% endfor %}
-      {% endwith %}
-    </select>
-  </div>
+        {% endwith %}
+      </select>
+    </div>
+  </form>
 </div>
 
 <!-- Update page display settings -->
diff --git a/bitbake/lib/toaster/toastergui/templates/detail_search_header.html 
b/bitbake/lib/toaster/toastergui/templates/detail_search_header.html
index 996b617..7a98659 100644
--- a/bitbake/lib/toaster/toastergui/templates/detail_search_header.html
+++ b/bitbake/lib/toaster/toastergui/templates/detail_search_header.html
@@ -21,48 +21,52 @@ $(document).ready(function() {
 
 {% if objects.paginator.count > 10 or request.GET.search %}
   {% if objects.paginator.count == 0 %}
-  <div class="alert">
-    <h3>No {{search_what}} found</h3>
-    <form id="searchform" class="input-append">
-  {% else %}
-    <form id="searchform" class="navbar-search input-append pull-left">
-  {% endif %}
+  <div class="alert alert-warning">
+    <h4>No {{search_what}} found</h4>
+    <form id="searchform" class="form-inline">
+      {% else %}
+      <form id="searchform" class="navbar-form navbar-left detail-page-controls">
+        {% endif %}
 
-      <input id="search" class="input-xlarge" type="text" placeholder="Search {{search_what}}" name="search" 
value="{% if request.GET.search %}{{request.GET.search}}{% endif %}">
-      <input type="hidden" value="name:+" name="orderby">
-      <input type="hidden" value="l" name="page">
-  {% if request.GET.search %}
-      <a class="input-append-addon btn search-clear">
-        <i class="glyphicon glyphicon-remove"></i>
-      </a>
-  {% endif %}
-      <button type="submit" class="btn">Search</button>
-  {% if objects.paginator.count == 0 %}
-      <button type="submit" class="btn btn-link search-clear">
-        Show all {{search_what}}
-      </button>
-  {% endif %}
-    </form>
-{% endif %}
+        <div class="form-group">
+          <div class="btn-group">
+            <input id="search" class="form-control" type="text" placeholder="Search {{search_what}}" 
name="search" value="{% if request.GET.search %}{{request.GET.search}}{% endif %}">
+            <input type="hidden" value="name:+" name="orderby">
+            <input type="hidden" value="l" name="page">
+            {% if request.GET.search %}
+            <span class="remove-search-btn-detail-search search-clear glyphicon 
glyphicon-remove-circle"></span>
+            {% endif %}
+          </div>
+        </div>
+        <button type="submit" class="btn btn-default">Search</button>
+        {% if objects.paginator.count == 0 %}
+        <button type="submit" class="btn btn-link search-clear">
+          Show all {{search_what}}
+        </button>
+        {% endif %}
+      </form>
+      {% endif %}
 
-{% if objects.paginator.count == 0 %}
+      {% if objects.paginator.count == 0 %}
   </div> {# end alert #}
-{% else %}
+  {% else %}
   {% if object_count > 10 %}
-  <div class="pull-right">
-    <span class="help-inline" style="padding-top:5px;">Show rows:</span>
-    <select style="margin-top:5px;margin-bottom:0px;" class="pagesize">
-    {% with "10 25 50 100 150" as list%}
-      {% for i in list.split %}
+  <form class="navbar-form navbar-right">
+    <div class="form-group">
+      <label>Show rows:</label>
+      <select class="pagesize form-control">
+        {% with "10 25 50 100 150" as list%}
+        {% for i in list.split %}
         {% if request.session.limit == i %}
-      <option value="{{i}}" selected>{{i}}</option>
+        <option value="{{i}}" selected>{{i}}</option>
         {% else %}
-      <option value="{{i}}">{{i}}</option>
+        <option value="{{i}}">{{i}}</option>
         {% endif %}
-      {% endfor %}
-    {% endwith %}
-    </select>
-  </div>
+        {% endfor %}
+        {% endwith %}
+      </select>
+    </div>
+  </form>
   {% endif %}
 {% endif %}
 
diff --git a/bitbake/lib/toaster/toastergui/templates/detail_sorted_header.html 
b/bitbake/lib/toaster/toastergui/templates/detail_sorted_header.html
index 6589b0a..4434df4 100644
--- a/bitbake/lib/toaster/toastergui/templates/detail_sorted_header.html
+++ b/bitbake/lib/toaster/toastergui/templates/detail_sorted_header.html
@@ -10,9 +10,9 @@
         <!-- Table header row; generated from "tablecols" entry in the context dict -->
         <tr>
             {% for tc in tablecols %}<th class="{%if tc.dclass%}{{tc.dclass}}{% endif %} {%if tc.class 
%}{{tc.clclass}}{% endif %}">
-                {%if tc.qhelp%}<i class="icon-question-sign get-help" title="{{tc.qhelp}}"></i>{%endif%}
-                {%if tc.orderfield%}<a {%if tc.ordericon%} class="sorted" 
{%endif%}href="javascript:reload_params({'page': 1, 'orderby' : '{{tc.orderfield}}' 
})">{{tc.name}}</a>{%else%}<span class="muted">{{tc.name}}</span>{%endif%}
-                {%if tc.ordericon%} <i class="icon-caret-{{tc.ordericon}}"></i>{%endif%}
+                {%if tc.qhelp%}<span class="glyphicon glyphicon-question-sign get-help" 
title="{{tc.qhelp}}"></span>{%endif%}
+                {%if tc.orderfield%}<a {%if tc.ordericon%} class="sorted" 
{%endif%}href="javascript:reload_params({'page': 1, 'orderby' : '{{tc.orderfield}}' 
})">{{tc.name}}</a>{%else%}<span class="text-muted">{{tc.name}}</span>{%endif%}
+                {%if tc.ordericon%} <span class="icon-caret-{{tc.ordericon}}"></span>{%endif%}
                 {% if request.GET.search and forloop.first %}
                     <span class="badge badge-info">{{objects.paginator.count}}</span>
                 {% endif %}
diff --git a/bitbake/lib/toaster/toastergui/templates/dirinfo.html 
b/bitbake/lib/toaster/toastergui/templates/dirinfo.html
index df06a94..458e933 100644
--- a/bitbake/lib/toaster/toastergui/templates/dirinfo.html
+++ b/bitbake/lib/toaster/toastergui/templates/dirinfo.html
@@ -59,9 +59,6 @@
     function formatRow(o) {
         /* setup tr-wide formatting */
         var tr = '<tr class="';
-        if (o.link_to != null) {
-            tr += 'muted ';
-        }
         if (o.isdir && o.childcount) {
             tr += 'branch" data-tt-branch="true" ';
         }
@@ -75,7 +72,7 @@
         tr += '>';
 
         /* setup td specific formatting */
-        var link_to = td(o.link_to);
+                               var link_to = '<td class="text-muted">' + o.link_to + '</td>';
         var size = '<td class = "sizecol">' + o.size + '</td>'
         var permission = td(o.permission);
         var owner = td(o.owner);
@@ -96,7 +93,7 @@
             if (o.childcount) {
                 name += '<a href="">';
             }
-            name += '<i class="icon-folder-close"></i>';
+            name += '<span class="glyphicon glyphicon-folder-close"></span>';
             name += '&nbsp;' + o.name;
             if (o.childcount) {
                 name += '</a>';
@@ -110,10 +107,10 @@
                   namespan = 3;
                 }
                 var colspan = 'colspan="' + namespan + '"';
-                name = '<td ' + colspan + '><i class="glyphicon glyphicon-file"></i>';
+                name = '<td ' + colspan + '><span class="glyphicon glyphicon-file"></span>';
             }
             else {
-                name = '<td><i class="icon-hand-right"></i>';
+                name = '<td class="text-muted"><span class="glyphicon glyphicon-hand-right"></span>';
             }
             name += '&nbsp;' + o.name;
             name += '</td>';
@@ -134,10 +131,10 @@
             package += '</a>';
             if (o.installed_package != o.package) {
                 /* make class muted and add hover help */
-                package += '<span class="muted"> as ' + o.installed_package + ' </span>';
-                package += '<i class="icon-question-sign get-help hover-help" ';
+                package += '<span class="text-muted"> as ' + o.installed_package + ' </span>';
+                package += '<span class="glyphicon glyphicon-question-sign get-help hover-help" ';
                 package += 'title="' + o.package + ' was renamed at packaging time and was installed in your 
image as ' + o.installed_package + '">';
-                package += '</i>';
+                package += '</span>';
             }
         }
         package = td(package);
@@ -186,20 +183,20 @@
 
 <div class="col-md-10">
 
-    <div class="page-header">
+    <div class="page-header build-data">
         <h1> {{target.target}} </h1>
     </div>
 
-    <ul class="nav nav-pills">
-        <li class="">
+    <ul class="nav nav-tabs">
+        <li>
             <a href="{% url 'target' build.id target.id %}">
-            <i class="icon-question-sign get-help" title="Of all the packages built, the subset installed in 
the root file system of this image"></i>
+            <span class="glyphicon glyphicon-question-sign get-help" title="Of all the packages built, the 
subset installed in the root file system of this image"></span>
                 Packages included ({{target.package_count}} - {{packages_sum|filtered_filesizeformat}})
             </a>
         </li>
         <li class="active">
             <a href="{% url 'dirinfo' build.id target.id %}">
-                <i class="icon-question-sign get-help" title="The directories and files in the root file 
system of this image"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The directories and files in 
the root file system of this image"></span>
                 Directory structure
             </a>
         </li>
diff --git a/bitbake/lib/toaster/toastergui/templates/filtersnippet.html 
b/bitbake/lib/toaster/toastergui/templates/filtersnippet.html
index 4c2c53e..1286ca3 100644
--- a/bitbake/lib/toaster/toastergui/templates/filtersnippet.html
+++ b/bitbake/lib/toaster/toastergui/templates/filtersnippet.html
@@ -6,59 +6,67 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <form>
-       <input type="hidden" name="search" value="{%if request.GET.search %}{{request.GET.search}}{%endif%}"/>
-       <div class="modal-header">
-         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
-         {% if search_term %}
-         <h3>Filter {{total_count}} {%if 
filter_search_display%}{{filter_search_display|title}}{%else%}{{objectname|title}}{%endif%} matching 
'{{search_term}}' by '{{tc.name}}'</h3>
-         {% else %}
-         <h3>Filter {%if 
filter_search_display%}{{filter_search_display|title}}{%else%}{{objectname|title}}{%endif%} by 
'{{tc.name}}'</h3>
-         {% endif %}
-       </div>
-       <div class="modal-body">
-         <p>{{f.label}}</p>
-         <label class="radio">
-           <input type="radio" name="filter" {%if 
request.GET.filter%}{{f.options|check_filter_status:request.GET.filter}} {%else%} checked {%endif%} value="" 
data-key="{{key}}">  All {%if 
filter_search_display%}{{filter_search_display|title}}{%else%}{{objectname|title}}{%endif%}
-         </label>
-         {% for option in f.options %}
-         {% if option.1 == 'daterange' %}
-         <div class="form-inline">
-           <label class="radio">
-             <input type="radio" name="filter" id="filter_value_{{key}}" {%if key == daterange_selected 
%}checked{%endif%} value="{{option.1}}" data-key="{{key}}"> {{option.0}}
-             {% else %}
-             {% if 1 %}
-             <label class="radio">
-               <input type="radio" name="filter" {%if request.GET.filter == option.1 %}checked{%endif%}  
value="{{option.1}}" data-key="{{key}}"> {{option.0}}
-               {% comment "do not disable radio selections by count for now" %}{% else %}
-               <label class="radio muted">
-                 <input type="radio" name="filter" disabled {%if request.GET.filter == option.1 
%}checked{%endif%}  value="{{option.1}}" data-key="{{key}}"> {{option.0}}
-                 {% endcomment %}{% endif %}
-                 {% endif %}
-                 {% if option.3 %}<i class="icon-question-sign get-help" data-placement="right" 
title="{{option.3}}"></i>{% endif %}
-               </label>
-               {% if option.1 == 'daterange' %}
-               <input type="text" id="date_from_{{key}}" name="date_from_{{key}}" disabled class="input-sm" 
/><label class="help-inline">to</label>
-               <input type="text" id="date_to_{{key}}" name="date_to_{{key}}" disabled class="input-sm"  />
-               <label class="help-inline get-help" >(dd/mm/yyyy)</label>
-         </div>
-         {% endif %}
-         {% endfor %}
-         <!-- daterange persistence -->
-         {% if last_date_from and last_date_to %}
-         <input type="hidden" id="last_date_from_{{key}}" name="last_date_from" value="{{last_date_from}}"/>
-         <input type="hidden" id="last_date_to_{{key}}" name="last_date_to"   value="{{last_date_to}}"/>
-         {% endif %}
-       </div>
-       <div class="modal-footer">
-         <button type="submit" class="btn btn-primary" data-key="{{key}}">Apply</button>
-         {% if request.GET.filter %}
-         {% if request.GET.filter|string_remove_regex:':.*' != f.options.0.1|string_remove_regex:':.*' %}
-         <span class="help-inline pull-left">You can only apply one filter to the table. This filter will 
override the current filter.</span>
-         {% endif %}
-         {% endif %}
-       </div>
+        <input type="hidden" name="search" value="{%if request.GET.search 
%}{{request.GET.search}}{%endif%}"/>
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
+          {% if search_term %}
+          <h3>Filter {{total_count}} {%if 
filter_search_display%}{{filter_search_display|title}}{%else%}{{objectname|title}}{%endif%} matching 
'{{search_term}}' by '{{tc.name}}'</h3>
+          {% else %}
+          <h3>Filter {%if 
filter_search_display%}{{filter_search_display|title}}{%else%}{{objectname|title}}{%endif%} by 
'{{tc.name}}'</h3>
+          {% endif %}
+        </div>
+        <div class="modal-body">
+          <p>{{f.label}}</p>
+          <div class="radio">
+            <label>
+              <input type="radio" name="filter" {%if 
request.GET.filter%}{{f.options|check_filter_status:request.GET.filter}} {%else%} checked {%endif%} value="" 
data-key="{{key}}">  All {%if 
filter_search_display%}{{filter_search_display|title}}{%else%}{{objectname|title}}{%endif%}
+            </label>
+          </div>
+          {% for option in f.options %}
+          <div class="radio">
+            {% if option.1 == 'daterange' %}
+            <label>
+              <input type="radio" name="filter" id="filter_value_{{key}}" {%if key == daterange_selected 
%}checked{%endif%} value="{{option.1}}" data-key="{{key}}"> {{option.0}}
+              {% else %}
+              {% if 1 %}
+              <label>
+                <input type="radio" name="filter" {%if request.GET.filter == option.1 %}checked{%endif%}  
value="{{option.1}}" data-key="{{key}}"> {{option.0}}
+                {% comment "do not disable radio selections by count for now" %}{% else %}
+                <label class="text-muted">
+                  <input type="radio" name="filter" disabled {%if request.GET.filter == option.1 
%}checked{%endif%}  value="{{option.1}}" data-key="{{key}}"> {{option.0}}
+                  {% endcomment %}{% endif %}
+                  {% endif %}
+                  {% if option.3 %}<i class="icon-question-sign get-help" data-placement="right" 
title="{{option.3}}"></i>{% endif %}
+                </label></div>
+                {% if option.1 == 'daterange' %}
+                <input type="text" id="date_from_{{key}}" name="date_from_{{key}}" disabled class="input-sm" 
/><label class="help-inline">to</label>
+                <input type="text" id="date_to_{{key}}" name="date_to_{{key}}" disabled class="input-sm"  />
+                <label class="help-inline get-help" >(dd/mm/yyyy)</label>
+        </div>
+        {% endif %}
+        {% endfor %}
+        <!-- daterange persistence -->
+        {% if last_date_from and last_date_to %}
+        <input type="hidden" id="last_date_from_{{key}}" name="last_date_from" value="{{last_date_from}}"/>
+        <input type="hidden" id="last_date_to_{{key}}" name="last_date_to"   value="{{last_date_to}}"/>
+        {% endif %}
+    </div>
+    <div class="modal-footer">
+      <div class="row">
+        <div class="col-md-6">
+          <button type="submit" class="btn btn-primary" data-key="{{key}}">Apply</button>
+        </div>
+        <div class="col-md-6">
+          {% if request.GET.filter %}
+          {% if request.GET.filter|string_remove_regex:':.*' != f.options.0.1|string_remove_regex:':.*' %}
+          <p class="text-right text-muted">You can only apply one filter to the table. This filter will 
override the current filter.</p>
+          {% endif %}
+          {% endif %}
+        </div>
+      </div>
+    </div>
       </form>
-    </div><!-- /.modal-content -->
-  </div><!-- /.modal-dialog -->
+  </div><!-- /.modal-content -->
+</div><!-- /.modal-dialog -->
 </div> <!--/.modal -->
 {% endwith %}
diff --git a/bitbake/lib/toaster/toastergui/templates/package_built_dependencies.html 
b/bitbake/lib/toaster/toastergui/templates/package_built_dependencies.html
index e53eb9d..a5d5893 100644
--- a/bitbake/lib/toaster/toastergui/templates/package_built_dependencies.html
+++ b/bitbake/lib/toaster/toastergui/templates/package_built_dependencies.html
@@ -2,16 +2,16 @@
 {% load projecttags %}
 
 {% block tabcontent %}
-        <ul class="nav nav-pills">
+        <ul class="nav nav-tabs">
             <li class="">
                 <a href="{% url 'package_built_detail' build.id package.id %}">
-                    <i class="icon-question-sign get-help" title="Shows the files produced by this 
package."></i>
+                    <span class="glyphicon glyphicon-question-sign get-help" title="Shows the files produced 
by this package."></span>
                     Generated files ({{package.buildfilelist_package.count}})
                 </a>
             </li>
             <li class="active">
                 <a href="{% url 'package_built_dependencies' build.id package.id %}">
-                    <i class="icon-question-sign get-help" title="Shows the runtime packages required by 
this package."></i>
+                    <span class="glyphicon glyphicon-question-sign get-help" title="Shows the runtime 
packages required by this package."></span>
                     Runtime dependencies ({{dependency_count}})
                 </a>
             </li>
@@ -24,7 +24,7 @@
                 </div>
             {% else %}
                 <div class="alert alert-info">
-                    <strong>{{package.fullpackagespec}}</strong> is <strong>not included</strong> in any 
image. This page shows you the projected runtime dependencies if you include 
<strong>{{package.fullpackagespec}}</strong> in future builds.
+                    <strong>{{package.fullpackagespec}}</strong> is <strong>not included</strong> in any 
image. This page shows you the projected runtime dependencies if you were to include 
<strong>{{package.fullpackagespec}}</strong> in an image.
                 </div>
                 <table class="table table-bordered table-hover">
                     <thead>
@@ -64,7 +64,7 @@
                             <th>Version</th>
                             <th class="sizecol col-md-2">Size</th>
                             <th>
-                                <i class="icon-question-sign get-help" title="Five relationship types exist: 
recommends, suggests, provides, replaces and conflicts"></i>
+                                <span class="glyphicon glyphicon-question-sign get-help" title="Five 
relationship types exist: recommends, suggests, provides, replaces and conflicts"></span>
                                 Relationship type
                             </th>
                         </tr>
@@ -87,7 +87,7 @@
                             <td class="sizecol">{{other_dep.size|filtered_filesizeformat}}</td>
                             <td>
                                 {{other_dep.dep_type_display}}
-                                <i class="icon-question-sign get-help hover-help" 
title="{{other_dep.dep_type_help}}" ></i>
+                                <span class="glyphicon glyphicon-question-sign get-help hover-help" 
title="{{other_dep.dep_type_help}}" ></span>
                             </td>
                         </tr>
                        {% endfor %}
diff --git a/bitbake/lib/toaster/toastergui/templates/package_built_detail.html 
b/bitbake/lib/toaster/toastergui/templates/package_built_detail.html
index 9be8ccb..0bdbc2a 100644
--- a/bitbake/lib/toaster/toastergui/templates/package_built_detail.html
+++ b/bitbake/lib/toaster/toastergui/templates/package_built_detail.html
@@ -6,13 +6,13 @@
         <!-- Generated Files -->
         {% if package.buildtargetlist_package.count == 0 %}
             {# Not included case #}
-            <ul class="nav nav-pills">
+            <ul class="nav nav-tabs">
                 <li class="active"> <a href="#">
-                    <i class="icon-question-sign get-help" title="Files added to a root file system when you 
include {{package.name}} in an image"></i>
+                    <span class="glyphicon glyphicon-question-sign get-help" title="Files added to a root 
file system when you include {{package.name}} in an image"></span>
                     Generated files ({{packageFileCount}})
                 </a></li>
                 <li class=""><a href="{% url 'package_built_dependencies' build.id package.id %}">
-                    <i class="icon-question-sign get-help" title="Projected runtime dependencies when you 
include {{package.name}} in an image"></i>
+                    <span class="glyphicon glyphicon-question-sign get-help" title="Projected runtime 
dependencies when you include {{package.name}} in an image"></span>
                     Runtime dependencies ({{dependency_count}})
                 </a></li>
             </ul>
@@ -21,7 +21,7 @@
             <!-- Package file list or if empty, alert pane -->
             {% if packageFileCount > 0 %}
                 <div class="alert alert-info">
-                    <strong>{{package.fullpackagespec}}</strong> is <strong>not included</strong> in any 
image. This page shows you the files added to an image root file system if you include 
<strong>{{package.fullpackagespec}}</strong> in future builds.
+                    <strong>{{package.fullpackagespec}}</strong> is <strong>not included</strong> in any 
image. This page shows you the files that would be added to an image root file system with 
<strong>{{package.fullpackagespec}}</strong> included in it.
                 </div>
                 {% include "tablesort.html" %}
                     <tbody>
diff --git a/bitbake/lib/toaster/toastergui/templates/package_detail_base.html 
b/bitbake/lib/toaster/toastergui/templates/package_detail_base.html
index 17562a8..bce7fb2 100644
--- a/bitbake/lib/toaster/toastergui/templates/package_detail_base.html
+++ b/bitbake/lib/toaster/toastergui/templates/package_detail_base.html
@@ -14,8 +14,8 @@
     function fmtAliasHelp(package_name, alias, hover) {
         var r = null;
         if (alias != null && alias != '') {
-            r = '<span class="muted"> as ' + alias + '&nbsp';
-            r += '<i class="icon-question-sign get-help';
+            r = '<span class="text-muted"> as ' + alias + '&nbsp';
+            r += '<span class="glyphicon glyphicon-question-sign get-help';
             if (hover) {
                 r+= ' hover-help';
             }
@@ -23,9 +23,9 @@
                 r+= ' heading-help';
             }
             r += '"';
-            title = package_name + ' was renamed at packaging time and was installed on your system as ' + 
alias;
+            title = '<code>' + package_name + '</code> was renamed at packaging time and was installed on 
your system as <code>' + alias + '</code>';
             r += ' title="' + title + '">';
-            r += '</i>';
+            r += '</span>';
             r += '</span>';
             document.write(r);
         }
@@ -45,7 +45,7 @@
 {% block pagedetailinfomain %}
     <div class="row">
       <div class="col-md-12">
-        <div class="page-header">
+        <div class="page-header build-data">
             {% block mainheading %}
             <h1>{{package.fullpackagespec}}</h1>
             {% endblock %}
@@ -68,7 +68,7 @@
         <dl class="item-info">
             <dt>
                 Size
-                <i class="icon-question-sign get-help" title="The size of the package"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The size of the 
package"></span>
             </dt>
             <dd>
                 {% comment %}
@@ -85,7 +85,7 @@
 
             <dt>
                 License
-                <i class="icon-question-sign get-help" title="The license under which this package is 
distributed"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The license under which this 
package is distributed"></span>
             </dt>
             <dd>{{package.license}}</dd>
 
@@ -101,7 +101,7 @@
 
             <dt>
                 Recipe
-                <i class="icon-question-sign get-help" title="The name of the recipe building this 
package"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The name of the recipe 
building this package"></span>
             </dt>
             <dd>
                 {% if package.recipe_id > 0 %}
@@ -113,13 +113,13 @@
 
             <dt>
                 Recipe version
-                <i class="icon-question-sign get-help" title="The version of the recipe building this 
package"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The version of the recipe 
building this package"></span>
             </dt>
             <dd>{{package.recipe.version}}</dd>
 
             <dt>
                 Layer
-                <i class="icon-question-sign get-help" title="The name of the layer providing the recipe 
that builds this package"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The name of the layer 
providing the recipe that builds this package"></span>
             </dt>
             <dd>
                 {{package.recipe.layer_version.layer.name}}
@@ -136,13 +136,13 @@
             {% if package.recipe.layer_version.branch %}
             <dt>
                 Layer branch
-                <i class="icon-question-sign get-help" title="The Git branch of the layer providing the 
recipe that builds this package"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The Git branch of the layer 
providing the recipe that builds this package"></span>
             </dt>
             <dd>{{package.recipe.layer_version.branch}}</dd>
             {% endif %}
             <dt>
                 Layer commit
-                <i class="icon-question-sign get-help" title="The Git commit of the layer providing the 
recipe that builds this package"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The Git commit of the layer 
providing the recipe that builds this package"></span>
             </dt>
 
             <dd class="iscommit">{{package.recipe.layer_version.commit}}</dd>
diff --git a/bitbake/lib/toaster/toastergui/templates/package_included_dependencies.html 
b/bitbake/lib/toaster/toastergui/templates/package_included_dependencies.html
index 0672ba3..95e56de 100644
--- a/bitbake/lib/toaster/toastergui/templates/package_included_dependencies.html
+++ b/bitbake/lib/toaster/toastergui/templates/package_included_dependencies.html
@@ -24,7 +24,7 @@
                     </tr>
                 </thead>
                 <tbody>
-                                       {% for runtime_dep in runtime_deps %}
+                  {% for runtime_dep in runtime_deps %}
                         <tr {{runtime_dep.size|format_vpackage_rowclass}} >
                             {% if runtime_dep.size != -1 %}
                             <td>
@@ -41,7 +41,7 @@
                             <td>{{runtime_dep.version}}&nbsp;</td>
                             <td class='sizecol'>{{runtime_dep.size|filtered_filesizeformat}}&nbsp;</td>
                         </tr>
-                                       {% endfor %}
+                        {% endfor %}
                  </tbody>
             </table>
         {% else %}
@@ -59,13 +59,13 @@
                         <th>Version</th>
                         <th class='sizecol col-md-2'>Size</th>
                         <th>
-                            <i class="icon-question-sign get-help" title="Five relationship types exist: 
recommends, suggests, provides, replaces and conflicts"></i>
+                            <span class="glyphicon glyphicon-question-sign get-help" title="Five 
relationship types exist: recommends, suggests, provides, replaces and conflicts"></span>
                             Relationship type
                         </th>
                     </tr>
                 </thead>
                 <tbody>
-                                       {% for other_dep in other_deps %}
+                  {% for other_dep in other_deps %}
                         {% if other_dep.installed %}
                             <tr {{other_dep.size|format_vpackage_rowclass}}>
                                 {% if other_dep.size != -1 %}
@@ -86,21 +86,21 @@
                                 <td class='sizecol'>{{other_dep.size|filtered_filesizeformat}}&nbsp;</td>
                                 <td>
                                     {{other_dep.dep_type_display}}
-                                    <i class="icon-question-sign get-help hover-help" 
title="{{other_dep.dep_type_help}}" ></i>
+                                    <span class="glyphicon glyphicon-question-sign get-help hover-help" 
title="{{other_dep.dep_type_help}}" ></span>
                                 </td>
                             </tr>
                         {% else %}
-                            <tr class="muted">
+                            <tr class="text-muted">
                                 <td>{{other_dep.name}}</td>
                                 <td>{{other_dep.version}}</td>
                                 <td></td>
                                 <td>
                                     {{other_dep.dep_type_display}}
-                                    <i class="icon-question-sign get-help hover-help" 
title="{{other_dep.dep_type_help}}" ></i>
+                                    <span class="glyphicon glyphicon-question-sign get-help hover-help" 
title="{{other_dep.dep_type_help}}" ></span>
                                 </td>
                             </tr>
                         {% endif %}
-                                       {% endfor %}
+                        {% endfor %}
                 </tbody>
             </table>
         {% endifnotequal %}
diff --git a/bitbake/lib/toaster/toastergui/templates/package_included_tabs.html 
b/bitbake/lib/toaster/toastergui/templates/package_included_tabs.html
index 958aa88..e89fa21 100644
--- a/bitbake/lib/toaster/toastergui/templates/package_included_tabs.html
+++ b/bitbake/lib/toaster/toastergui/templates/package_included_tabs.html
@@ -1,12 +1,12 @@
 
-    <ul class="nav nav-pills">
+    <ul class="nav nav-tabs">
     {% if active_tab == "detail" %}
         <li class="active">
     {% else %}
         <li class="">
     {% endif %}
             <a href="{% url 'package_included_detail' build.id target.id package.id %}">
-                <i class="icon-question-sign get-help" title="The files this package adds to the image root 
file system"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The files this package adds 
to the image root file system"></span>
                 Files in root file system ({{packageFileCount}})
             </a>
         </li>
@@ -16,7 +16,7 @@
         <li class="">
     {% endif %}
             <a href="{% url 'package_included_dependencies' build.id target.id package.id %}">
-                <i class="icon-question-sign get-help" title="Package runtime dependencies"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="Package runtime 
dependencies"></span>
                 Runtime dependencies ({{dependency_count}})
             </a>
         </li>
@@ -26,7 +26,7 @@
         <li class="">
     {% endif %}
             <a href="{% url 'package_included_reverse_dependencies' build.id target.id package.id %}">
-                <i class="icon-question-sign get-help" title="The package runtime reverse dependencies (i.e. 
the packages in this image that depend on this package). Reverse dependencies reflect only the 'depends' 
dependency type"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The package runtime reverse 
dependencies (i.e. the packages in this image that depend on this package). Reverse dependencies reflect only 
the 'depends' dependency type"></span>
                 Reverse runtime dependencies ({{reverse_count}})
             </a>
         </li>
diff --git a/bitbake/lib/toaster/toastergui/templates/recipe.html 
b/bitbake/lib/toaster/toastergui/templates/recipe.html
index 2aaff6b..97e7b99 100644
--- a/bitbake/lib/toaster/toastergui/templates/recipe.html
+++ b/bitbake/lib/toaster/toastergui/templates/recipe.html
@@ -14,7 +14,7 @@
 
 <div class="row">
   <div class="col-md-12">
-    <div class="page-header">
+    <div class="page-header build-data">
         <h1>{{object.name}}_{{object.version}}</h1>
     </div>
   </div>
@@ -22,28 +22,33 @@
 
 <div class="row">
   <div class="col-md-8 tabbable">
-    <ul class="nav nav-pills">
+    <ul class="nav nav-tabs">
         <li class="{{tab_states.1}}">
             <a href="#information" data-toggle="tab">
-                <i class="icon-question-sign get-help" title="Build-related information about the 
recipe"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="Build-related
+                    information about the recipe"></span>
                 Recipe details
             </a>
         </li>
         <li>
              <a href="{% url "recipe_packages" build.pk object.id %}">
-                <i class="icon-question-sign get-help" title="The packaged output resulting from building 
the recipe"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The packaged
+                    output resulting from building the recipe"></span>
                 Packages ({{package_count}})
             </a>
         </li>
         <li class="{{tab_states.3}}">
             <a href="#dependencies" data-toggle="tab">
-                <i class="icon-question-sign get-help" title="The recipe build-time dependencies (i.e. other 
recipes)"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The recipe
+                    build-time dependencies (i.e. other recipes)"></span>
                 Build dependencies ({{object.r_dependencies_recipe.all.count}})
             </a>
         </li>
         <li class="{{tab_states.4}}">
             <a href="#brought-in-by" data-toggle="tab">
-                <i class="icon-question-sign get-help" title="The recipe build-time reverse dependencies 
(i.e. the recipes that depend on this recipe)"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The recipe
+                    build-time reverse dependencies (i.e. the recipes that
+                depend on this recipe)"></span>
                 Reverse build dependencies ({{object.r_dependencies_depends.all.count}})
             </a>
         </li>
@@ -52,34 +57,39 @@
         <div class="tab-pane {{tab_states.1}}" id="information">
             <dl class="dl-horizontal">
                 <dt>
-                    <i class="icon-question-sign get-help" title="The name of the layer providing the 
recipe"></i>
+                    <span class="glyphicon glyphicon-question-sign get-help" title="The name of
+                        the layer providing the recipe"></span>
                     Layer
                 </dt>
                 <dd>{{layer.name}}</dd>
 
                 <dt>
-                    <i class="icon-question-sign get-help" title="Path to the recipe .bb file"></i>
+                    <span class="glyphicon glyphicon-question-sign get-help" title="Path to the
+                        recipe .bb file"></span>
                     Recipe file
                 </dt>
                 <dd><code>{{object.file_path}} {% if object.pathflags %}<i>({{object.pathflags}})</i>{% 
endif %}</code></dd>
                 {% if layer_version.branch %}
                 <dt>
-                    <i class="icon-question-sign get-help" title="The Git branch of the layer providing the 
recipe"></i>
+                    <span class="glyphicon glyphicon-question-sign get-help"
+                        title="The Git branch of the layer providing the
+                    recipe"></span>
                     Layer branch
                 </dt>
                 <dd>{{layer_version.branch}}</dd>
                 {% endif %}
                 <dt>
-                    <i class="icon-question-sign get-help" title="The Git commit of the layer providing the 
recipe"></i>
+                    <span class="glyphicon glyphicon-question-sign get-help" title="The Git
+                        commit of the layer providing the recipe"></span>
                     Layer commit
                 </dt>
                 <dd class="iscommit">{{layer_version.commit}}</dd>
                 {% if object.provides_set.all %}
                 <dt>
-                    <i class="icon-question-sign get-help"
+                    <span class="glyphicon glyphicon-question-sign get-help"
                      title="A list of aliases by which a particular recipe can be known. The additional 
aliases are
                            synonyms for the recipe and can be useful satisfying dependencies of other 
recipes during
-                           the build"></i>
+                           the build"></span>
                     PROVIDES
                 </dt>
                  <dd><code>{% for provider in object.provides_set.all %}{{ provider.name }}&nbsp;{% endfor 
%}</code></dd>
@@ -92,30 +102,45 @@
                 <strong>{{object.name}}_{{object.version}}</strong> does not have any tasks in this build.
             </div>
             {% else %}
+            <div class="table-responsive">
             <table class="table table-bordered table-hover">
                 <thead>
-                 <tr>
+                  <tr>
                     <th>
-                        <i class="icon-question-sign get-help" title="The running sequence of each task in 
the build"></i>
+                        <span class="glyphicon glyphicon-question-sign
+                            get-help" title="The running sequence of each task
+                            in the build"></span>
                         Order
                     </th>
                     <th>
-                        <i class="icon-question-sign get-help" title="The name of the task"></i>
+                        <span class="glyphicon glyphicon-question-sign get-help" title="The name
+                            of the task"></span>
                         Task
                     </th>
                     <th>
-                        <i class="icon-question-sign get-help" title="This value tells you if a task had to 
run (executed) in order to generate the task output, or if the output was provided by another task and 
therefore the task didn't need to run (not executed)"></i>
+                        <span class="glyphicon glyphicon-question-sign get-help" title="This
+                            value tells you if a task had to run (executed) in
+                        order to generate the task output, or if the output was
+                    provided by another task and therefore the task didn't need
+                to run (not executed)"></span>
                         Executed
                     </th>
                     <th>
-                        <i class="icon-question-sign get-help" title="This column tells you if 'executed' 
tasks succeeded or failed. The column also tells you why 'not executed' tasks did not need to run"></i>
+                        <span class="glyphicon glyphicon-question-sign get-help" title="This
+                            column tells you if 'executed' tasks succeeded or
+                            failed. The column also tells you why 'not executed'
+                            tasks did not need to run"></span>
                         Outcome
                     </th>
                     <th>
-                        <i class="icon-question-sign get-help" title="This column tells you if a task tried 
to restore output from the <code>sstate-cache</code> directory or mirrors, and reports the result: Succeeded, 
Failed or File not in cache"></i>
+                        <span class="glyphicon glyphicon-question-sign get-help" title="This
+                            column tells you if a task tried to restore output
+                            from the <code>sstate-cache</code> directory or
+                            mirrors, and reports the result: Succeeded, Failed or File
+                            not in cache"></span>
                         Cache attempt
                     </th>
-                 </tr>
+                  </tr>
                 </thead>
                 <tbody>
 
@@ -123,26 +148,30 @@
 
                     <tr {{ task|task_color }} >
 
-                    <td><a {{ task|task_color }} href="{% url "task" build.pk task.pk 
%}">{{task.order}}</a></td>
+                    <td>{{task.order}}</td>
                     <td>
-                        <a {{ task|task_color }} href="{% url "task" build.pk task.pk 
%}">{{task.task_name}}</a>
-                        {% if task.get_description %}<i class="icon-question-sign get-help hover-help" 
title="" data-original-title="{{task.get_description}}"></i> {% endif %}
+                        <a href="{% url "task" build.pk task.pk %}">{{task.task_name}}</a>
+                        {% if task.get_description %}<span class="glyphicon
+                            glyphicon-question-sign get-help hover-help"
+                            title="{{task.get_description}}"></span> 
+                        {% endif %}
                     </td>
 
-                    <td><a {{ task|task_color }} href="{% url "task" build.pk task.pk 
%}">{{task.get_executed_display}}</a></td>
+                    <td>{{task.get_executed_display}}</td>
 
-                    <td>
-                        <a {{ task|task_color }} href="{% url "task" build.pk task.pk 
%}">{{task.get_outcome_display}} </a>
+                    <td>{{task.get_outcome_display}} 
                         {% if task.outcome = task.OUTCOME_FAILED %}
                             <a href="{% url 'build_artifact' build.pk "tasklogfile" task.pk %}">
-                                <i class="icon-download-alt" title="Download task log file"></i>
+                                <span class="glyphicon glyphicon-download-alt
+                                    get-help" title="Download task log
+                                file"></span>
                             </a>
                         {% endif %}
                         <i class="icon-question-sign get-help hover-help" 
title="{{task.get_outcome_help}}"></i>
                     </td>
                     <td>
                         {% ifnotequal task.sstate_result task.SSTATE_NA %}
-                        <a {{ task|task_color }} href="{% url "task" build.pk task.pk 
%}">{{task.get_sstate_result_display}}</a>
+                            {{task.get_sstate_result_display}}
                         {% endifnotequal %}
                     </td>
 
@@ -151,6 +180,7 @@
                     {% endfor %}
                 </tbody>
             </table>
+            </div>
             {% endif %}
         </div>
         <div class="tab-pane {{tab_states.3}}" id="dependencies">
@@ -177,13 +207,13 @@
                     <tr>
                         <td><a href="{% url "recipe" build.pk rr.depends_on.pk %}">{{rr.depends_on.name}}</a>
                             {% if rr.via %}
-                                <span class="muted">satisfied via {{rr.via.name}}</span>
-                                <i class="icon-question-sign get-help hover-help"
+                            <span class="text-muted">satisfied via <code 
class="text-muted">{{rr.via.name}}</code></span>
+                                <span class="glyphicon glyphicon-question-sign get-help hover-help"
                                  title="This dependency is satisfied by the PROVIDES value
-                                       {{rr.via.name}} in the {{rr.depends_on.name}} recipe"></i>
+                                 <code>{{rr.via.name}}</code> in the <code>{{rr.depends_on.name}}</code> 
recipe"></span>
                             {% endif %}
                         </td>
-                        <td><a href="{% url "recipe" build.pk rr.depends_on.pk 
%}">{{rr.depends_on.version}}</a></td>
+                        <td>{{rr.depends_on.version}}</td>
                     </tr>
                     {% endfor %}
 
@@ -216,13 +246,13 @@
                     <tr>
                         <td><a href="{% url "recipe" build.pk rr.recipe.pk %}">{{rr.recipe.name}}</a>
                         {% if rr.via %}
-                            <span class="muted"> satisfied via {{rr.via.name}}</span>
-                            <i class="icon-question-sign get-help hover-help"
+                        <span class="text-muted"> satisfied via <code 
class="text-muted">{{rr.via.name}}</code></span>
+                            <span class="glyphicon glyphicon-question-sign get-help hover-help"
                              title="This dependency is satisfied by the PROVIDES value
-                            {{rr.via.name}} in the {{rr.depends_on.name}} recipe"></i>
+                             <code>{{rr.via.name}}</code> in the <code>{{rr.depends_on.name}}</code> 
recipe"></i>
                         {% endif %}
                         </td>
-                        <td><a href="{% url "recipe" build.pk rr.recipe.pk %}">{{rr.recipe.version}}</a></td>
+                        <td>{{rr.recipe.version}}</td>
                     </tr>
                     {% endfor %}
 
@@ -257,7 +287,7 @@
         {% if object.section %}
             <dt>
             Section
-            <i class="icon-question-sign get-help" title="The section in which recipes should be 
categorized"></i>
+            <span class="glyphicon glyphicon-question-sign get-help" title="The section in which recipes 
should be categorized"></span>
             </dt>
             <dd>{{object.section}}</dd>
         {% endif %}
diff --git a/bitbake/lib/toaster/toastergui/templates/recipe_packages.html 
b/bitbake/lib/toaster/toastergui/templates/recipe_packages.html
index 2c2efd8..37a586f 100644
--- a/bitbake/lib/toaster/toastergui/templates/recipe_packages.html
+++ b/bitbake/lib/toaster/toastergui/templates/recipe_packages.html
@@ -13,7 +13,7 @@
 
 <div class="row">
   <div class="col-md-12">
-    <div class="page-header">
+    <div class="page-header build-data">
         <h1>{{recipe.name}}_{{recipe.version}}</h1>
     </div>
   </div>
@@ -21,28 +21,33 @@
 
 <div class="row">
   <div class="col-md-8 tabbable">
-    <ul class="nav nav-pills">
+    <ul class="nav nav-tabs">
         <li>
             <a href="{% url "recipe" build.pk recipe.id "1" %}">
-                <i class="icon-question-sign get-help" title="Build-related information about the 
recipe"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="Build-related
+                    information about the recipe"></span>
                 Recipe details
             </a>
         </li>
         <li class="active">
-                       <a href="#packages-built" data-toggle="tab">
-                <i class="icon-question-sign get-help" title="The packaged output resulting from building 
the recipe"></i>
+          <a href="#packages-built" data-toggle="tab">
+                <span class="glyphicon glyphicon-question-sign get-help" title="The packaged
+                    output resulting from building the recipe"></span>
                 Packages ({{object_count}})
             </a>
         </li>
         <li>
             <a href="{% url "recipe" build.pk recipe.id "3" %}">
-                <i class="icon-question-sign get-help" title="The recipe build-time dependencies (i.e. other 
recipes)"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The recipe
+                    build-time dependencies (i.e. other recipes)"></span>
                 Build dependencies ({{recipe.r_dependencies_recipe.all.count}})
             </a>
         </li>
         <li>
             <a href="{% url "recipe" build.pk recipe.id "4" %}">
-                <i class="icon-question-sign get-help" title="The recipe build-time reverse dependencies 
(i.e. the recipes that depend on this recipe)"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The recipe
+                    build-time reverse dependencies (i.e. the recipes that
+                    depend on this recipe)"></span>
                 Reverse build dependencies ({{recipe.r_dependencies_depends.all.count}})
             </a>
         </li>
@@ -75,8 +80,8 @@
 
                     <tr>
                         <td><a href="{% url "package_built_detail" build.pk package.pk 
%}">{{package.name}}</a></td>
-                        <td><a href="{% url "package_built_detail" build.pk package.pk 
%}">{{package.version}}_{{package.revision}}</a></td>
-                        <td class="sizecol"><a href="{% url "package_built_detail" build.pk package.pk 
%}">{{package.size|filtered_filesizeformat}}</a></td>
+                        <td>{{package.version}}_{{package.revision}}</td>
+                        <td class="sizecol">{{package.size|filtered_filesizeformat}}</td>
                     </tr>
 
                         {% endfor %}
diff --git a/bitbake/lib/toaster/toastergui/templates/recipedetails.html 
b/bitbake/lib/toaster/toastergui/templates/recipedetails.html
index 19b18ff..66c1f7b 100644
--- a/bitbake/lib/toaster/toastergui/templates/recipedetails.html
+++ b/bitbake/lib/toaster/toastergui/templates/recipedetails.html
@@ -118,7 +118,7 @@
   <div class="col-md-4">
     <div class="well">
       <h2>About {{recipe.name}}</h2>
-      <dl>
+      <dl class="item-info">
         <dt>
         Approx. packages included
         <span class="glyphicon glyphicon-question-sign get-help" title="The number of packages included is 
based on information from previous builds and from parsing layers, so we can never be sure it is 100% 
accurate"></span>
diff --git a/bitbake/lib/toaster/toastergui/templates/snippets/gitrev_popover.html 
b/bitbake/lib/toaster/toastergui/templates/snippets/gitrev_popover.html
index 281a3bd..c1e3dab 100644
--- a/bitbake/lib/toaster/toastergui/templates/snippets/gitrev_popover.html
+++ b/bitbake/lib/toaster/toastergui/templates/snippets/gitrev_popover.html
@@ -1,6 +1,6 @@
 {% load projecttags  %}
 {% if vcs_ref|is_shaid %}
-<a class="btn" data-content="<ul class='unstyled'> <li>{{vcs_ref}}</li> </ul>">
+<a class="btn btn-default" data-content="{{vcs_ref}}">
  {{vcs_ref|truncatechars:10}}
 </a>
 {% else %}
diff --git a/bitbake/lib/toaster/toastergui/templates/snippets/pkg_dependencies_popover.html 
b/bitbake/lib/toaster/toastergui/templates/snippets/pkg_dependencies_popover.html
index 5be409c..273437e 100644
--- a/bitbake/lib/toaster/toastergui/templates/snippets/pkg_dependencies_popover.html
+++ b/bitbake/lib/toaster/toastergui/templates/snippets/pkg_dependencies_popover.html
@@ -5,7 +5,7 @@
 {% with count_package=package_deps.packages|length %}
 
 {% if count_package > 0 %}
-  <a data-content='<ul class="unstyled">
+  <a data-content='<ul class="list-unstyled">
   {% for dep in package_deps.packages %}
      <li>
       {% if extra.add_links %}
diff --git a/bitbake/lib/toaster/toastergui/templates/snippets/pkg_revdependencies_popover.html 
b/bitbake/lib/toaster/toastergui/templates/snippets/pkg_revdependencies_popover.html
index 65c2b29..e6ef816 100644
--- a/bitbake/lib/toaster/toastergui/templates/snippets/pkg_revdependencies_popover.html
+++ b/bitbake/lib/toaster/toastergui/templates/snippets/pkg_revdependencies_popover.html
@@ -5,7 +5,7 @@
 {% with count_package=package_deps.packages|length %}
 
 {% if count_package > 0 %}
-  <a data-content='<ul class="unstyled">
+  <a data-content='<ul class="list-unstyled">
   {% for dep in package_deps.packages|dictsort:"package.name" %}
      <li>
       {% if extra.add_links %}
diff --git a/bitbake/lib/toaster/toastergui/templates/target.html 
b/bitbake/lib/toaster/toastergui/templates/target.html
index 0b2fe99..1924a0d 100644
--- a/bitbake/lib/toaster/toastergui/templates/target.html
+++ b/bitbake/lib/toaster/toastergui/templates/target.html
@@ -18,7 +18,7 @@
 
 {% block buildinfomain %}
 <div class="col-md-10">
-    <div class="page-header">
+    <div class="page-header build-data">
         <h1>
             {% if request.GET.search and objects.paginator.count > 0 %}
                 {{objects.paginator.count}} package{{objects.paginator.count|pluralize}} found
@@ -30,16 +30,16 @@
         </h1>
     </div>
 <div id="navTab">
-    <ul class="nav nav-pills">
+    <ul class="nav nav-tabs">
         <li class="active">
             <a href="#target">
-            <i class="icon-question-sign get-help" title="Of all the packages built, the subset installed in 
the root file system of this image"></i>
+            <span class="glyphicon glyphicon-question-sign get-help" title="Of all the packages built, the 
subset installed in the root file system of this image"></span>
                 Packages included ({{target.package_count}} - {{packages_sum|filtered_filesizeformat}})
             </a>
         </li>
         <li>
             <a href="{% url 'dirinfo' build.id target.id %}">
-                <i class="icon-question-sign get-help" title="The directories and files in the root file 
system of this image"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The directories and files in 
the root file system of this image"></span>
                 Directory structure
             </a>
         </li>
@@ -51,6 +51,6 @@
         {% include "toastertable.html" %}
         {% endwith %}
     </div> <!-- tabpane -->
-       </div> <!--navTab -->>
+       </div> <!--navTab -->
 <!-- col-md-10 -->
 {% endblock buildinfomain %}
diff --git a/bitbake/lib/toaster/toastergui/templates/task.html 
b/bitbake/lib/toaster/toastergui/templates/task.html
index 77391b4..86789bd 100644
--- a/bitbake/lib/toaster/toastergui/templates/task.html
+++ b/bitbake/lib/toaster/toastergui/templates/task.html
@@ -13,19 +13,20 @@
 
 <div class="row">
   <div class="col-md-12">
-    <div class="page-header">
+    <div class="page-header build-data">
         <h1><a href="{%url 'recipe' build.pk task.recipe.pk 
%}">{{task.recipe.name}}_{{task.recipe.version}}</a> {{task.task_name}}</h1>
     </div>
 
 {# Outcome section #}
 <h2 {{ task|task_color:True }}>
     {{task.get_outcome_display}}
-    <i class="icon-question-sign get-help heading-help" title="{{task.get_outcome_help}}"></i>
+    <span class="glyphicon glyphicon-question-sign get-help" title="{{task.get_outcome_help}}"></i>
 </h2>
 {%if task.task_executed %}
     {# executed tasks outcome #}
     {% if task.logfile %}
-            <a class="btn btn-lg" href="{% url 'build_artifact' build.id "tasklogfile" task.pk %}" 
style="margin:15px;">Download task log</a>
+            <a class="btn btn-default btn-lg" href="{% url 'build_artifact' build.id
+                "tasklogfile" task.pk %}">Download task log</a>
     {% endif %}
         {# show stack trace for failed task #}
         {% if task.outcome == task.OUTCOME_FAILED and log_head %}
@@ -41,31 +42,55 @@
 {# not executed tasks outcome #}
     {% if task.outcome == task.OUTCOME_PREBUILT %}
         {% if not showing_matches %}
-            <a class="btn" href="javascript:reload_params({'show_matches' : 'true' })">Match to tasks in 
previous builds <i class="icon-question-sign get-help" style="margin-top:20px;" title="This shows you a list 
of tasks from previous builds with the same signature generated from the same inputs as used in the prebuilt 
task. Any of them could be the task that generated the output this prebuilt task is reusing"></i></a>
+            <a class="btn btn-default"
+                href="javascript:reload_params({'show_matches' : 'true'
+        })">Match to tasks in previous builds <span class="glyphicon
+glyphicon-question-sign get-help" title="This shows you a list of tasks from
+previous builds with the same signature generated from the same inputs as used
+in the prebuilt task. Any of them could be the task that generated the output
+this prebuilt task is reusing"></span></a>
         {% elif matching_tasks %}
             <h3 class="details">Prebuilt task could be based on
-                <i class="icon-question-sign get-help heading-help" title="This table shows a list of tasks 
from previous builds with the same signature generated from the same inputs as used in the prebuilt task. Any 
of them could be the task that generated the output this prebuilt task is reusing"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="This
+                    table shows a list of tasks from previous builds with the
+                same signature generated from the same inputs as used in the
+            prebuilt task. Any of them could be the task that generated the
+        output this prebuilt task is reusing"></span>
             </h3>
+        <div class="table-responsive">
             <table class="table table-bordered table-hover">
                 <thead>
                     <th>
-                        <i class="icon-question-sign get-help" title="The name of the recipe to which each 
task applies"></i>
+                        <span class="glyphicon glyphicon-question-sign
+                            get-help" title="The name of the recipe to which
+                        each task applies"></span>
                         Recipe
                     </th>
                     <th>
-                        <i class="icon-question-sign get-help" title="The name of the task"></i>
+                        <span class="glyphicon glyphicon-question-sign get-help" title="The name
+                            of the task"></span>
                         Task
                     </th>
                     <th>
-                        <i class="icon-question-sign get-help" title="This value tells you if a task had to 
run (executed) in order to generate the task output, or if the output was provided by another task and 
therefore the task didn't need to run (not executed)"></i>
+                        <span class="glyphicon glyphicon-question-sign get-help" title="This
+                            value tells you if a task had to run (executed) in
+                        order to generate the task output, or if the output was
+                    provided by another task and therefore the task didn't need
+                to run (not executed)"></span>
                         Executed
                     </th>
                     <th>
-                        <i class="icon-question-sign get-help" title="This column tells you if 'executed' 
tasks succeeded or failed. The column also tells you why 'not executed' tasks did not need to run"></i>
+                        <span class="glyphicon glyphicon-question-sign
+                            get-help" title="This column tells you if
+                        'executed' tasks succeeded or failed. The column also
+                    tells you why 'not executed' tasks did not need to
+                run"></span>
                         Outcome
                     </th>
                     <th>
-                        <i class="icon-question-sign get-help" title="The date and time the build 
finished"></i>
+                        <span class="glyphicon glyphicon-question-sign
+                            get-help" title="The date and time the build
+                        finished"></span>
                         Build completed on
                     </th>
                 </thead>
@@ -73,27 +98,34 @@
                     {% for match in matching_tasks %}
                         <tr {{ match|task_color }}>
                             <td>
-                                <a href="{%url "task" match.build.pk match.pk%}">{{match.recipe.name}}</a>
+                                {{match.recipe.name}}
                             </td>
                             <td>
                                 <a href="{%url "task" match.build.pk match.pk%}">{{match.task_name}}</a>
                                 {% if task.get_description %}
-                                    <i class="icon-question-sign get-help hover-help" 
title="{{task.get_description}}"></i>
+                                    <span class="glyphicon
+                                        glyphicon-question-sign get-help
+                                    hover-help"
+                                title="{{task.get_description}}"></span>
                                 {% endif %}
                             </td>
                             <td>
-                                <a href="{%url "task" match.build.pk 
match.pk%}">{{match.get_executed_display}}</a>
+                                {{match.get_executed_display}}
                             </td>
                             <td>
-                                <a href="{%url "task" match.build.pk 
match.pk%}">{{match.get_outcome_display}} </a><i class="icon-question-sign get-help hover-help" 
title="{{match.get_outcome_help}}"></i>
+                                {{match.get_outcome_display}}
+                                <span class="glyphicon glyphicon-question-sign
+                                get-help hover-help"
+                            title="{{match.get_outcome_help}}"></span>
                             </td>
                             <td>
-                                <a href="{%url "task" match.build.pk 
match.pk%}">{{match.build.completed_on|date:"d/m/y H:i"}}</a>
+                                {{match.build.completed_on|date:"d/m/y H:i"}}
                             </td>
                         </tr>
                     {% endfor %}
                 </tbody>
             </table>
+        </div>
         {% else %}
             <p class="alert">
                 <strong> We have found no tasks matching this prebuilt task</strong><br/>
@@ -103,10 +135,11 @@
     {% elif task.outcome == task.OUTCOME_COVERED %}
         <dl class="dl-horizontal">
             <dt>
-                <i class="icon-question-sign get-help" title="The task(s) providing the outcome of this 
task"></i> Task covered by
+                <span class="glyphicon glyphicon-question-sign get-help" title="The task(s)
+                    providing the outcome of this task"></span> Task covered by
             </dt>
             <dd>
-                <ul>
+                <ul class="list-unstyled">
                   {% for t in covered_by %}
                     <li>
                       <a href="{%url 'task' t.build.pk t.pk%}"
@@ -123,7 +156,8 @@
     {%elif task.outcome == task.OUTCOME_CACHED%}
             {% for t in task.get_related_setscene %}
                 {% if forloop.last %}
-                    <a class="btn btn-lg" href="{% url 'build_artifact' build.id "tasklogfile" t.pk %}" 
style="margin:15px;">Download task log</a>
+                    <a class="btn btn-default btn-lg" href="{% url
+                        'build_artifact' build.id "tasklogfile" t.pk %}">Download task log</a>
                 {% endif %}
             {% endfor %}
 
@@ -138,17 +172,25 @@
     {% if task.task_executed %}
     <h2>
         Executed
-        <i class="icon-question-sign get-help heading-help" title="'Executed' tasks are those that need to 
run in order to generate the task output"></i>
+        <span class="glyphicon glyphicon-question-sign get-help"
+            title="'Executed' tasks are those that need to run in order to
+        generate the task output"></span>
     {% else %}
-    <h2 class="muted">
+    <h2>
         Not Executed
-        <i class="icon-question-sign get-help heading-help" title="'Not executed' tasks don't need to run 
because their outcome is provided by another task"></i>
+        <span class="glyphicon glyphicon-question-sign get-help" title="'Not
+            executed' tasks don't need to run because their outcome is provided
+        by another task"></span>
     {% endif %}
     </h2>
 
 <dl class="dl-horizontal">
     <dt>
-        <i class="icon-question-sign get-help" title="To make builds more efficient, the build system 
detects changes in the 'inputs' to a given task by creating a 'task signature'. If the signature changes, the 
build system assumes the inputs have changed and the task needs to be rerun"></i>
+        <span class="glyphicon glyphicon-question-sign get-help" title="To make builds more
+            efficient, the build system detects changes in the 'inputs' to a
+        given task by creating a 'task signature'. If the signature changes,
+    the build system assumes the inputs have changed and the task needs to be
+rerun"></span>
         Task inputs signature
     </dt>
     <dd>
@@ -157,19 +199,29 @@
     {% if task.sstate_result != task.SSTATE_NA %}
   </dl>
         <div class="alert alert-info">Attempting to restore output from sstate cache
-            <i class="icon-question-sign get-help get-help-blue" title="The build system is searching for 
the task output in your <code>sstate-cache</code> directory and mirrors. If the build system finds the task 
output, it will reuse it instead of building it from scratch by running the real task. Reusing the task 
output makes the build faster"></i>
+            <span class="glyphicon glyphicon-question-sign get-help
+                get-help-blue" title="The build system is searching for the
+                task output in your <code>sstate-cache</code> directory and
+                mirrors. If the build system finds the task output, it will reuse it
+                instead of building it from scratch by running the real task. Reusing the
+                task output makes the build faster"></span>
         </div>
         <dl class="dl-horizontal">
             <dt>
-                <i class="icon-question-sign get-help" title="The name of the file searched for in your 
<code>sstate-cache</code> directory and mirrors"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The name of the
+                    file searched for in your <code>sstate-cache</code>
+                    directory and mirrors"></span>
                 File searched for
             </dt>
             <dd><code>{{task.path_to_sstate_obj}}</code></dd>
             <dt>
-                <i class="icon-question-sign get-help" title="The locations searched for the above file 
(i.e. your <code>sstate-cache</code> directory and any mirrors you have set up)"></i>
+                <span class="glyphicon glyphicon-question-sign get-help" title="The locations
+                    searched for the above file (i.e. your
+                    <code>sstate-cache</code> directory and any mirrors you have
+                    set up)"></span>
                 URI(s) searched
             </dt>
-            <dd><ul>{% for uri in uri_list %}<li><code>{{uri}}</code></li>{% endfor %}</ul></dd>
+            <dd><ul class="list-unstyled">{% for uri in uri_list %}<li><code>{{uri}}</code></li>{% endfor 
%}</ul></dd>
         </dl>
     {% endif %}
     {% if task.sstate_result == task.SSTATE_MISS %}
@@ -177,7 +229,7 @@
             <strong>File not in sstate cache.</strong> Running the real task instead.
         </div>
     {% elif task.sstate_result == task.SSTATE_FAILED%}
-        <div class="alert">
+        <div class="alert alert-warning">
             <strong>Failed</strong> to restore output from sstate cache. The file was found but could not be 
unpacked.
         </div>
         <dl class="dl-horizontal">
@@ -193,13 +245,16 @@
     {% endif %}
     <dl class="dl-horizontal">
     <dt>
-        <i class="icon-question-sign get-help" title="The running sequence of each task in the build"></i>
+        <span class="glyphicon glyphicon-question-sign get-help" title="The
+            running sequence of each task in the build"></span>
         Task order
     </dt>
     <dd><a href="{%url "tasks" build.pk 
%}?page={{task_in_tasks_table_pg}}&limit=25#task-{{task.order}}">{{task.order}}</a></dd>
     {% if task.task_executed %}
         <dt>
-            <i class="icon-question-sign get-help" title="Indicates if this task executes a Python or Shell 
function(s)"></i>
+            <span class="glyphicon glyphicon-question-sign get-help"
+                title="Indicates if this task executes a Python or Shell
+            function(s)"></span>
             Task script type
         </dt>
         <dd>{{task.get_script_type_display}}</dd>
@@ -212,29 +267,31 @@
     <dd><code>{{task.source_url}}</code></dd>
 -->
     <dt>
-        <i class="icon-question-sign get-help" title="Task dependency chain (i.e. other tasks)"></i>
+        <span class="glyphicon glyphicon-question-sign get-help" title="Task dependency chain
+            (i.e. other tasks)"></span>
         Dependencies
     </dt>
     <dd>
-        <ul>
-            {% for dep in deps %}
-                <li><a href="{%url 'task' dep.build.pk dep.pk%}" class="task-info" 
title="{{dep.get_executed_display}} | {{dep.get_outcome_display}}">{{dep.recipe.name}}_{{dep.recipe.version}} 
<span class="task-name">{{dep.task_name}}</span></a></li>
-            {% empty %}
-                <li class="muted">This task has no dependencies</li>
-            {% endfor %}
+        <ul class="list-unstyled">
+        {% for dep in deps %}
+            <li><a href="{%url 'task' dep.build.pk dep.pk%}" class="task-info" 
title="{{dep.get_executed_display}} | {{dep.get_outcome_display}}">{{dep.recipe.name}}_{{dep.recipe.version}} 
<span class="task-name">{{dep.task_name}}</span></a></li>
+        {% empty %}
+            <li class="text-muted" style="margin-bottom: -10px;">This task has no dependencies</li>
+        {% endfor %}
         </ul>
     </dd>
     <dt>
-        <i class="icon-question-sign get-help" title="Tasks that depend on this task"></i>
+        <span class="glyphicon glyphicon-question-sign get-help" title="Tasks that depend on this
+            task"></span>
         Reverse dependencies
     </dt>
     <dd>
-        <ul>
-            {% for dep in rdeps %}
-                <li><a href="{%url 'task' dep.build.pk dep.pk%}" class="task-info" 
title="{{dep.get_executed_display}} | {{dep.get_outcome_display}}">{{dep.recipe.name}}_{{dep.recipe.version}} 
<span class="task-name">{{dep.task_name}}</span></a></li>
-            {% empty %}
-                <li class="muted">This task has no reverse dependencies</li>
-            {% endfor %}
+        <ul class="list-unstyled">
+        {% for dep in rdeps %}
+            <li><a href="{%url 'task' dep.build.pk dep.pk%}" class="task-info" 
title="{{dep.get_executed_display}} | {{dep.get_outcome_display}}">{{dep.recipe.name}}_{{dep.recipe.version}} 
<span class="task-name">{{dep.task_name}}</span></a></li>
+        {% empty %}
+            <li class="text-muted">This task has no reverse dependencies</li>
+        {% endfor %}
         </ul>
 </dl>
 
@@ -245,28 +302,36 @@
     <dl class="dl-horizontal">
         {% if task.elapsed_time %}
         <dt>
-            <i class="icon-question-sign get-help" title="How long it took the task to finish in 
seconds"></i>
+            <span class="glyphicon glyphicon-question-sign get-help" title="How
+                long it took the task to finish in seconds"></span>
             Time (secs)
         </dt>
         <dd>{{task.elapsed_time|format_none_and_zero|floatformat:2}}</dd>
         {% endif %}
         {% if task.cpu_time_user > 0 %}
         <dt>
-            <i class="icon-question-sign get-help" title="Total amount of time spent executing in user mode, 
in seconds. Note that this time can be greater than the task time due to parallel execution."></i>
+            <span class="glyphicon glyphicon-question-sign get-help" title="Total amount of time
+                spent executing in user mode, in seconds. Note that this time
+            can be greater than the task time due to parallel
+        execution."></span>
             User CPU time (secs)
         </dt>
         <dd>{{task.cpu_time_user|format_none_and_zero|floatformat:2}}</dd>
         {% endif %}
         {% if task.cpu_time_system > 0 %}
         <dt>
-            <i class="icon-question-sign get-help" title="Total amount of time spent executing in kernel 
mode, in seconds. Note that this time can be greater than the task time due to parallel execution."></i>
+            <span class="glyphicon glyphicon-question-sign get-help" title="Total amount of time
+                spent executing in kernel mode, in seconds. Note that this time
+            can be greater than the task time due to parallel
+        execution."></span>
             System CPU time (secs)
         </dt>
         <dd>{{task.cpu_time_system|format_none_and_zero|floatformat:2}}</dd>
         {% endif %}
         {% if task.disk_io > 0 %}
         <dt>
-            <i class="icon-question-sign get-help" title="Number of bytes written to and read from the disk 
during the task"></i>
+            <span class="glyphicon glyphicon-question-sign get-help" title="Number of bytes
+                written to and read from the disk during the task"></span>
             Disk I/O (bytes)
         </dt>
         <dd>{{task.disk_io|format_none_and_zero|intcomma}}</dd>
diff --git a/bitbake/lib/toaster/toastergui/templates/unavailable_artifact.html 
b/bitbake/lib/toaster/toastergui/templates/unavailable_artifact.html
index 331a484..fc77e40 100644
--- a/bitbake/lib/toaster/toastergui/templates/unavailable_artifact.html
+++ b/bitbake/lib/toaster/toastergui/templates/unavailable_artifact.html
@@ -6,10 +6,12 @@
 {% block title %} Build artifact does not exist - Toaster {% endblock %}
 
 {% block pagecontent %}
-    <div class="row air">
-        <div class="alert alert-info col-md-8 lead">
-            <p>The build artifact you are trying to download does not exist.</p>
-            <p><a href="javascript:window.history.back()">Back to previous page</a></p>
+    <div class="row">
+        <div class="col-md-8">
+            <div class="alert alert-info lead top-air">
+                <p>The build artifact you are trying to download does not exist.</p>
+                <p><a href="javascript:window.history.back()">Back to previous page</a></p>
+            </div>
         </div>
     </div>
 {% endblock %}
diff --git a/bitbake/lib/toaster/toastergui/templatetags/projecttags.py 
b/bitbake/lib/toaster/toastergui/templatetags/projecttags.py
index 119311d..dc75f22 100644
--- a/bitbake/lib/toaster/toastergui/templatetags/projecttags.py
+++ b/bitbake/lib/toaster/toastergui/templatetags/projecttags.py
@@ -112,11 +112,11 @@ def task_color(task_object, show_green=False):
         show_green argument should be True to get green color.
     """
     if not task_object.task_executed:
-        return 'class=muted'
+        return 'class=text-muted'
     elif task_object.outcome == task_object.OUTCOME_FAILED:
-        return 'class=error'
+        return 'class=text-danger'
     elif task_object.outcome == task_object.OUTCOME_SUCCESS and show_green:
-        return 'class=green'
+        return 'class=text-success'
     else:
         return ''
 
@@ -250,15 +250,15 @@ from django.utils.safestring import mark_safe
 @register.filter
 def format_vpackage_rowclass(size):
     if size == -1:
-        return mark_safe('class="muted"')
+        return mark_safe('class="text-muted"')
     return ''
 
 @register.filter
 def format_vpackage_namehelp(name):
     r =  name + '&nbsp;'
-    r += '<i class="icon-question-sign get-help hover-help"'
+    r += '<span class="glyphicon glyphicon-question-sign get-help hover-help"'
     r += ' title = "' + name + ' has not been built">'
-    r += '</i>'
+    r += '</span>'
     return mark_safe(r)
 
 @register.filter
diff --git a/bitbake/lib/toaster/toastergui/views.py b/bitbake/lib/toaster/toastergui/views.py
index d58aff0..9121ea9 100755
--- a/bitbake/lib/toaster/toastergui/views.py
+++ b/bitbake/lib/toaster/toastergui/views.py
@@ -898,7 +898,6 @@ def configvars(request, build_id):
                 },
                 {'name': 'Value',
                  'qhelp': "The value assigned to the variable",
-                 'dclass': "span4",
                 },
                 {'name': 'Set in file',
                  'qhelp': "The last configuration file that touched the variable value",


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]