diff --git a/neutrino-custom/base.js b/neutrino-custom/base.js
index 2a4dfbbf337..3dec89e380c 100644
--- a/neutrino-custom/base.js
+++ b/neutrino-custom/base.js
@@ -33,7 +33,7 @@ module.exports = neutrino => {
         // Include files from node_modules in the separate, more-cacheable vendor chunk:
         const jsDeps = [
             'angular', 'angular-cookies', 'angular-local-storage', 'angular-resource',
-            'angular-route', 'angular-sanitize', 'angular-toarrayfilter', 'angular-ui-bootstrap',
+            'angular-route', 'angular-sanitize', 'angular-toarrayfilter', 'angular1-ui-bootstrap4',
             'angular-ui-router', 'bootstrap/dist/js/bootstrap', 'hawk', 'jquery', 'jquery.scrollto',
             'js-yaml', 'mousetrap', 'react', 'react-dom', 'taskcluster-client', 'numeral', 'metrics-graphics'];
         jsDeps.map(dep =>
@@ -166,6 +166,8 @@ module.exports = neutrino => {
             jQuery: require.resolve('jquery'),
             'window.$': require.resolve('jquery'),
             'window.jQuery': require.resolve('jquery'),
+            // Required by Bootstrap 4: https://getbootstrap.com/docs/4.0/getting-started/webpack/
+            Popper: ['popper.js', 'default'],
             React: require.resolve('react'),
             _: require.resolve('lodash'),
             treeherder: require.resolve(path.join(UI, 'js/treeherder.js')),
diff --git a/package.json b/package.json
index f0c50a119ef..64c0b9a64b8 100644
--- a/package.json
+++ b/package.json
@@ -20,9 +20,9 @@
     "angular-route": "1.5.11",
     "angular-sanitize": "1.5.11",
     "angular-toarrayfilter": "1.0.2",
-    "angular-ui-bootstrap": "1.3.3",
     "angular-ui-router": "0.4.3",
-    "bootstrap": "3.3.7",
+    "angular1-ui-bootstrap4": "2.4.22",
+    "bootstrap": "4.0.0-beta.2",
     "deepmerge": "1.5.2",
     "font-awesome": "4.7.0",
     "hawk": "6.0.2",
@@ -39,6 +39,7 @@
     "neutrino-preset-react": "4.2.3",
     "ngreact": "0.5.0",
     "numeral": "2.0.6",
+    "popper.js": "1.12.6",
     "raw-loader": "0.5.1",
     "react": "15.3.2",
     "react-dom": "15.3.2",
diff --git a/tests/ui/unit/init.js b/tests/ui/unit/init.js
index 5e15febfbf9..f4886ee8748 100644
--- a/tests/ui/unit/init.js
+++ b/tests/ui/unit/init.js
@@ -21,7 +21,7 @@ require('angular-toarrayfilter');
 require('mousetrap');
 require('js-yaml');
 require('ngreact');
-require('angular-ui-bootstrap');
+require('angular1-ui-bootstrap4');
 require('angular-marked');
 require('../../../ui/vendor/resizer.js');
 
diff --git a/ui/css/failureviewer.css b/ui/css/failureviewer.css
index 375c1dc76e7..a415ea18a34 100644
--- a/ui/css/failureviewer.css
+++ b/ui/css/failureviewer.css
@@ -17,13 +17,17 @@ body {
     margin-bottom: 10px; /* Breathing space for run-data */
 }
 
-.navbar > li > a, .navbar-default > li > a, .navbar-nav > li > a {
+.nav li {
+    padding-right: 20px;
+}
+
+.navbar > li > a, .navbar-light > li > a, .navbar-nav > li > a {
     padding: 0;
     line-height: inherit;
 }
 
 #fv-logo {
-    padding: 14px 15px 0 15px;
+    padding: 6px 15px 0 10px;
     border: none;
     background: #f8f8f8;
 }
diff --git a/ui/css/logviewer.css b/ui/css/logviewer.css
index f8a1f61334c..272e1831cc4 100644
--- a/ui/css/logviewer.css
+++ b/ui/css/logviewer.css
@@ -24,17 +24,31 @@ body {
     padding-bottom: 8px;
 }
 
-.navbar-nav > li > a {
+.navbar-light {
+    background-color: #f8f8f8;
+    border-color: #e7e7e7;
+    padding: 0;
+}
+
+.navbar-row {
+    flex-direction: row;
+}
+
+.navbar-row li {
+    align-self: center;
+}
+
+.navbar-row > li > a {
     padding: 10px 15px;
     font-size: 12px;
 }
 
-.navbar-nav > li > div {
+.navbar-row > li > div {
     padding: 10px 15px;
     line-height: 20px;
 }
 
-.navbar-nav > li > span {
+.navbar-row > li > span {
     line-height: 20px;
 }
 
@@ -65,12 +79,10 @@ body {
 }
 
 .lv-line-no {
-    width: 3em;
-}
-
-.lv-line-no.label {
-    border-radius: 0px;
-    margin: 0em 0.6em 0em 0em;
+    width: 4em;
+    padding: 2px 1px 4px 5px;
+    border-radius: 0;
+    margin: 0 0.2em 0 0;
 }
 
 .lv-error-line {
@@ -142,7 +154,7 @@ div.lv-step {
     background-color: #FFF;
 }
 
-.lv-actionbtn span {
+.lv-actionbtn span, .navbar-default li > a {
     color: #777;
 }
 
diff --git a/ui/css/perf.css b/ui/css/perf.css
index 47ce0f35aaf..ee9f3eea45e 100644
--- a/ui/css/perf.css
+++ b/ui/css/perf.css
@@ -30,6 +30,10 @@ to { opacity: 0; }
     background: #f8f8f8;
 }
 
+login {
+    align-self: center;
+}
+
 #graph-chooser { flex: none; width: 240px; padding: 8px; }
 
 #data-display { flex: auto; }
@@ -143,6 +147,10 @@ to { opacity: 0; }
   font-weight: bold;
 }
 
+.subtest-header th {
+    padding: 5px;
+}
+
 .subtest-improvement {
   background: green;
   color: white;
@@ -195,7 +203,7 @@ to { opacity: 0; }
 .btn-group-vertical {
   flex: none;
   position: relative;
-  top: 310px;
+  top: 115px;
   padding: 3px;
 }
 
@@ -215,7 +223,7 @@ to { opacity: 0; }
 
 .choose-test-list {
   margin-top: 8px;
-  height: 200px;
+  height: 85px;
 }
 
 .test-loading-placeholder {
@@ -225,6 +233,11 @@ to { opacity: 0; }
 
 /* Compare interface stuff */
 
+ph-compare-table hr {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
 .push-information {
     font-size: 18px;
     color: #777;
@@ -245,10 +258,6 @@ to { opacity: 0; }
   flex-flow: row;
 }
 
-.centered-element {
-  flex: none;
-}
-
 .compare-form {
   align: center;
   display: flex;
@@ -261,7 +270,7 @@ to { opacity: 0; }
   flex: none;
 }
 
-.compare-form .form-group .panel {
+.compare-form .form-group .card {
   flex: none;
   width: 360px;
   height: 250px;
@@ -275,9 +284,12 @@ to { opacity: 0; }
   left: -5px;
 }
 
-.compare-form .form-group .input-group-btn {
-  flex: none;
-  width: 80px;
+.compare-form .input-group-btn button:hover {
+  background-color: darkgrey;
+}
+
+.compare-form .input-group-btn button:focus {
+  box-shadow: none;
 }
 
 .compare-table td, th {
@@ -386,10 +398,15 @@ span.compare-notsure {
     cursor: pointer;
 }
 
+.alert-summary {
+    margin-bottom: 20px;
+}
+
 .alert-summary-heading {
   display: flex;
   flex-flow: row;
   padding: 0;
+  border-bottom: 1px solid transparent;
 }
 
 .alert-summary-header-element {
@@ -399,7 +416,8 @@ span.compare-notsure {
 
 .alert-summary-title {
     flex: auto;
-    padding: 8px 4px;
+    padding: 9px 4px;
+    line-height: 19px;
 }
 
 .alert-summary-title .anchor {
@@ -407,12 +425,34 @@ span.compare-notsure {
     font-weight: bold;
 }
 
+.alert-summary-title .dropdown {
+    vertical-align: text-bottom;
+}
+
 .alert-summary-title .icon-superscript {
   vertical-align: super;
   font-size: 0.625em;
   margin-left: -0.2em;
 }
 
+.alert-summary-title #push-dropdown {
+  padding: 0;
+  margin-bottom: -4px;
+}
+
+.alert-summary .compare-table {
+    margin-bottom: 0;
+}
+
+.alert-summary .card-body {
+    border-top: 1px solid #ddd;
+    padding: 15px;
+}
+
+.alert-summary .card-body p {
+    margin: 0 0 10px;
+}
+
 .dropdown {
     padding: 0;
     vertical-align: inherit;
@@ -430,9 +470,11 @@ span.compare-notsure {
 /* Table widths for alerts */
 td.alert-checkbox {
     width: 30px;
+    padding: 8px;
 }
 td.alert-title {
     text-align: left;
+    padding: 8px;
 }
 td.alert-value {
     width: 140px;
@@ -461,6 +503,10 @@ td.alert-confidence {
     text-decoration: line-through;
 }
 
+.alert-selects .form-group {
+    margin-right: 6px;
+}
+
 .compare-table-tooltip .tooltip-inner {
   max-width: 280px;
 }
@@ -497,3 +543,27 @@ td.alert-confidence {
 .replicate-graph .mg-category-guides line {
     stroke: #ffffff;
 }
+
+/* The paginator in angular1-ui-bootstrap4 always tries to put chevrons
+   for the prev/next buttons, but they look all messed up sizing wise.
+   The paginator SHOULD show the text of Next/Previous, but it's not, so this
+   is a work-around.*/
+li.page-item .material-icons {
+    font-size: 0;
+}
+
+li.pagination-prev .material-icons::before {
+    content: "Previous";
+    font-size: 14px;
+    font-style: normal;
+}
+
+li.pagination-next .material-icons::before {
+    content: "Next";
+    font-size: 14px;
+    font-style: normal;
+}
+
+.pagination {
+    margin: 20px 0;
+}
diff --git a/ui/css/treeherder-global.css b/ui/css/treeherder-global.css
index be26a83e6a3..634f7a425ba 100755
--- a/ui/css/treeherder-global.css
+++ b/ui/css/treeherder-global.css
@@ -13,6 +13,7 @@ html, body {
   height: 100%;
   font-size: 14px;
   line-height: 1.42;
+  overflow-x: hidden;
 }
 
 body {
@@ -20,12 +21,20 @@ body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
-a:visited {
+a:visited, .link-style:visited {
   color: purple;
 }
 
 a {
   color: #337ab7;
+  cursor: pointer;
+}
+
+/* Bootstrap 4 will not show <a> as a link style if it has no href.
+   This adds that style back. */
+.link-style {
+  color: #337ab7 !important;
+  cursor: pointer;
 }
 
 #global-container {
@@ -41,7 +50,7 @@ a {
   overflow-x: hidden;
 }
 
-.pagination, .carousel, .panel-title a {
+.pagination, .panel-title a {
   cursor: pointer;
 }
 
@@ -50,11 +59,11 @@ a {
   visibility: hidden;
 }
 
-/* Presently Tier menu, Similar Jobs panel */
+/* Similar Jobs panel */
 .checkbox {
   min-height: 20px;
   padding-left: 4px;
-  padding-top: 4px;
+  padding-top: 2px;
   justify-content: center;
 }
 
@@ -76,9 +85,16 @@ input[type="checkbox"] {
   cursor: not-allowed;
 }
 
-/* Spacing for menus with adjacent checkboxes */
-.checkbox-dropdown-menu {
-  padding-left: 8px;
+/* For cases where the base Bootstrap 4 equivalent doesn't
+   work, due to our special uses.*/
+.nav-dropdown-menu-right {
+    left: auto;
+    right: 0;
+}
+
+.form-control:focus {
+    border: 1px solid #ced4da;
+    box-shadow: none;
 }
 
 /* Spacing for menus with adjacent icons */
@@ -86,6 +102,10 @@ input[type="checkbox"] {
   width: 20px;
 }
 
+.modal-header .close:hover {
+  cursor: pointer;
+}
+
 /*
  * Icons
  */
@@ -252,6 +272,12 @@ input[type="checkbox"] {
   font-size: 12px;
 }
 
+.btn-sm {
+  padding: 5px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
 .btn-light-bordered {
   border: 1px solid darkgrey;
   background-color: white;
diff --git a/ui/css/treeherder-info-panel.css b/ui/css/treeherder-info-panel.css
index b0d28412d3b..3787a0eb364 100644
--- a/ui/css/treeherder-info-panel.css
+++ b/ui/css/treeherder-info-panel.css
@@ -42,10 +42,16 @@ div#info-panel .navbar-nav > ul {
   height: 32px;
 }
 
-div#info-panel .navbar-nav > li > a,
-div#info-panel .navbar-nav > li > button {
-  padding: 6px 15px;
-  line-height: 19px;
+div#info-panel .navbar-nav.actionbar-nav > li > a,
+div#info-panel .navbar-nav.actionbar-nav > li > button {
+  padding: 8px 15px;
+  line-height: 16px;
+}
+
+div#info-panel .navbar-nav.tab-headers > li > a,
+div#info-panel .navbar-nav.tab-headers > li > button {
+  padding: 8px 15px;
+  line-height: 30px;
 }
 
 div#info-panel .navbar-nav > li > button {
@@ -79,11 +85,23 @@ div#info-panel .info-panel-navbar > ul.tab-headers > li {
   border: 1px solid transparent;
   color: #CED3D9;
   display: flex;
+  flex-direction: row;
   z-index: 100;
+  height: 33px;
+}
+
+.info-panel-navbar li {
+  align-self: center;
 }
 
 .info-panel-navbar-tabs {
   justify-content: space-between;
+  flex-direction: row;
+}
+
+.tab-headers {
+  flex-direction: row;
+  min-width: 550px;
 }
 
 .info-panel-navbar-controls {
@@ -92,6 +110,7 @@ div#info-panel .info-panel-navbar > ul.tab-headers > li {
 
 .info-panel-navbar .navbar-nav {
   display: flex;
+  flex-direction: row;
 }
 
 .info-panel-navbar .navbar-nav > li {
@@ -101,6 +120,7 @@ div#info-panel .info-panel-navbar > ul.tab-headers > li {
 .info-panel-navbar .navbar-nav > li > a,
 .info-panel-navbar .navbar-nav > li > button {
   color: #9FA3A5;
+  padding: 7px 15px;
 }
 
 div#info-panel .navbar-nav > li > a:hover,
@@ -130,7 +150,10 @@ div#info-panel .navbar-nav > li > button.disabled:active
 
 div#info-panel .info-panel-navbar .navbar-nav > li.active a,
 div#info-panel .info-panel-navbar .navbar-nav > li.active a:hover,
-div#info-panel .info-panel-navbar .navbar-nav > li.active a:focus {
+div#info-panel .info-panel-navbar .navbar-nav > li.active a:focus,
+div#info-panel .info-panel-navbar > li.active a,
+div#info-panel .info-panel-navbar > li.active a:hover,
+div#info-panel .info-panel-navbar > li.active a:focus {
   background-color: #1A4666;
   color: #EEF0F2;
 }
@@ -166,16 +189,47 @@ div#info-panel .info-panel-navbar .navbar-nav > li.active a:focus {
   100% { transform: rotate(1turn); }
 }
 
+.actionbar-nav {
+  flex-direction: row;
+}
+
 .actionbar-nav > li {
   /* Override padding on all icons to keep compact */
   padding: 0 !important;
 }
 
 .actionbar-menu {
-  /* We have to override non-responsive bootstrap for correct styling */
-  margin-top: 1px !important;
+  margin-top: 23px;
   margin-left: 6px;
-  border-radius: 4px !important;
+  border-radius: 4px;
+  top: 0;
+  right: 0;
+  left: auto;
+}
+
+#actionbar-menu-btn {
+  padding: 8px 13px;
+  margin-right: 1px;
+}
+
+#actionbar-menu-btn:hover {
+  background-color: #262626;
+  cursor: pointer;
+}
+
+#actionbar-menu-btn:focus {
+  box-shadow: none;
+  border: none;
+  outline: none;
+}
+
+/* Remove the caret from the ellipses */
+#actionbar-menu-btn.dropdown-toggle::after {
+    display:none
+}
+
+#job-details-actionbar #actionbar-menu-btn + ul > li {
+  padding: 0;
 }
 
 /*
@@ -423,6 +477,7 @@ ul.failure-summary-list li .btn-xs {
 .btn-similar-jobs {
   background: #fff;
   cursor: default;
+  font-size: 12px;
 }
 
 .similar_jobs {
@@ -626,7 +681,7 @@ th-error-line.ignored {
   color: darkgrey;
 }
 
-th-error-line .label-ignored {
+th-error-line .badge-ignored {
   background-color: lightgrey;
 }
 
diff --git a/ui/css/treeherder-job-buttons.css b/ui/css/treeherder-job-buttons.css
index 8a71d8f6c16..4d9b8872935 100644
--- a/ui/css/treeherder-job-buttons.css
+++ b/ui/css/treeherder-job-buttons.css
@@ -210,10 +210,10 @@
 .btn-orange.disabled:focus,
 .btn-orange.disabled:active,
 .btn-orange.disabled.active,
-.btn-orange[disabled]:hover,
-.btn-orange[disabled]:focus,
-.btn-orange[disabled]:active,
-.btn-orange[disabled].active,
+.btn-orange:disabled:hover,
+.btn-orange:disabled:focus,
+.btn-orange:disabled:active,
+.btn-orange:disabled.active,
 fieldset[disabled] .btn-orange:hover,
 fieldset[disabled] .btn-orange:focus,
 fieldset[disabled] .btn-orange:active,
@@ -242,10 +242,10 @@ fieldset[disabled] .btn-orange.active {
 .btn-orange-classified.disabled:focus,
 .btn-orange-classified.disabled:active,
 .btn-orange-classified.disabled.active,
-.btn-orange-classified[disabled]:hover,
-.btn-orange-classified[disabled]:focus,
-.btn-orange-classified[disabled]:active,
-.btn-orange-classified[disabled].active,
+.btn-orange-classified:disabled:hover,
+.btn-orange-classified:disabled:focus,
+.btn-orange-classified:disabled:active,
+.btn-orange-classified:disabled.active,
 fieldset[disabled] .btn-orange-classified:hover,
 fieldset[disabled] .btn-orange-classified:focus,
 fieldset[disabled] .btn-orange-classified:active,
@@ -272,10 +272,10 @@ fieldset[disabled] .btn-orange-classified.active {
 .btn-red.disabled:focus,
 .btn-red.disabled:active,
 .btn-red.disabled.active,
-.btn-red[disabled]:hover,
-.btn-red[disabled]:focus,
-.btn-red[disabled]:active,
-.btn-red[disabled].active,
+.btn-red:disabled:hover,
+.btn-red:disabled:focus,
+.btn-red:disabled:active,
+.btn-red:disabled.active,
 fieldset[disabled] .btn-red:hover,
 fieldset[disabled] .btn-red:focus,
 fieldset[disabled] .btn-red:active,
@@ -302,10 +302,10 @@ fieldset[disabled] .btn-red.active {
 .btn-red-classified.disabled:focus,
 .btn-red-classified.disabled:active,
 .btn-red-classified.disabled.active,
-.btn-red-classified[disabled]:hover,
-.btn-red-classified[disabled]:focus,
-.btn-red-classified[disabled]:active,
-.btn-red-classified[disabled].active,
+.btn-red-classified:disabled:hover,
+.btn-red-classified:disabled:focus,
+.btn-red-classified:disabled:active,
+.btn-red-classified:disabled.active,
 fieldset[disabled] .btn-red-classified:hover,
 fieldset[disabled] .btn-red-classified:focus,
 fieldset[disabled] .btn-red-classified:active,
@@ -339,10 +339,10 @@ fieldset[disabled] .btn-red-classified.active {
 .btn-dkblue.disabled:focus,
 .btn-dkblue.disabled:active,
 .btn-dkblue.disabled.active,
-.btn-dkblue[disabled]:hover,
-.btn-dkblue[disabled]:focus,
-.btn-dkblue[disabled]:active,
-.btn-dkblue[disabled].active,
+.btn-dkblue:disabled:hover,
+.btn-dkblue:disabled:focus,
+.btn-dkblue:disabled:active,
+.btn-dkblue:disabled.active,
 fieldset[disabled] .btn-dkblue:hover,
 fieldset[disabled] .btn-dkblue:focus,
 fieldset[disabled] .btn-dkblue:active,
@@ -374,10 +374,10 @@ fieldset[disabled] .btn-dkblue.active {
 .btn-green.disabled:focus,
 .btn-green.disabled:active,
 .btn-green.disabled.active,
-.btn-green[disabled]:hover,
-.btn-green[disabled]:focus,
-.btn-green[disabled]:active,
-.btn-green[disabled].active,
+.btn-green:disabled:hover,
+.btn-green:disabled:focus,
+.btn-green:disabled:active,
+.btn-green:disabled.active,
 fieldset[disabled] .btn-green:hover,
 fieldset[disabled] .btn-green:focus,
 fieldset[disabled] .btn-green:active,
@@ -403,10 +403,10 @@ fieldset[disabled] .btn-green.active {
 .btn-purple.disabled:focus,
 .btn-purple.disabled:active,
 .btn-purple.disabled.active,
-.btn-purple[disabled]:hover,
-.btn-purple[disabled]:focus,
-.btn-purple[disabled]:active,
-.btn-purple[disabled].active,
+.btn-purple:disabled:hover,
+.btn-purple:disabled:focus,
+.btn-purple:disabled:active,
+.btn-purple:disabled.active,
 fieldset[disabled] .btn-purple:hover,
 fieldset[disabled] .btn-purple:focus,
 fieldset[disabled] .btn-purple:active,
@@ -434,10 +434,10 @@ fieldset[disabled] .btn-purple.active {
 .btn-purple-classified.disabled:focus,
 .btn-purple-classified.disabled:active,
 .btn-purple-classified.disabled.active,
-.btn-purple-classified[disabled]:hover,
-.btn-purple-classified[disabled]:focus,
-.btn-purple-classified[disabled]:active,
-.btn-purple-classified[disabled].active,
+.btn-purple-classified:disabled:hover,
+.btn-purple-classified:disabled:focus,
+.btn-purple-classified:disabled:active,
+.btn-purple-classified:disabled.active,
 fieldset[disabled] .btn-purple-classified:hover,
 fieldset[disabled] .btn-purple-classified:focus,
 fieldset[disabled] .btn-purple-classified:active,
@@ -470,10 +470,10 @@ fieldset[disabled] .btn-purple-classified.active {
 .btn-ltblue.disabled:focus,
 .btn-ltblue.disabled:active,
 .btn-ltblue.disabled.active,
-.btn-ltblue[disabled]:hover,
-.btn-ltblue[disabled]:focus,
-.btn-ltblue[disabled]:active,
-.btn-ltblue[disabled].active,
+.btn-ltblue:disabled:hover,
+.btn-ltblue:disabled:focus,
+.btn-ltblue:disabled:active,
+.btn-ltblue:disabled.active,
 fieldset[disabled] .btn-ltblue:hover,
 fieldset[disabled] .btn-ltblue:focus,
 fieldset[disabled] .btn-ltblue:active,
@@ -504,10 +504,10 @@ fieldset[disabled] .btn-ltblue.active {
 .btn-ltgray.disabled:focus,
 .btn-ltgray.disabled:active,
 .btn-ltgray.disabled.active,
-.btn-ltgray[disabled]:hover,
-.btn-ltgray[disabled]:focus,
-.btn-ltgray[disabled]:active,
-.btn-ltgray[disabled].active,
+.btn-ltgray:disabled:hover,
+.btn-ltgray:disabled:focus,
+.btn-ltgray:disabled:active,
+.btn-ltgray:disabled.active,
 fieldset[disabled] .btn-ltgray:hover,
 fieldset[disabled] .btn-ltgray:focus,
 fieldset[disabled] .btn-ltgray:active,
@@ -538,10 +538,10 @@ fieldset[disabled] .btn-ltgray.active {
 .btn-mdgray.disabled:focus,
 .btn-mdgray.disabled:active,
 .btn-mdgray.disabled.active,
-.btn-mdgray[disabled]:hover,
-.btn-mdgray[disabled]:focus,
-.btn-mdgray[disabled]:active,
-.btn-mdgray[disabled].active,
+.btn-mdgray:disabled:hover,
+.btn-mdgray:disabled:focus,
+.btn-mdgray:disabled:active,
+.btn-mdgray:disabled.active,
 fieldset[disabled] .btn-mdgray:hover,
 fieldset[disabled] .btn-mdgray:focus,
 fieldset[disabled] .btn-mdgray:active,
@@ -572,10 +572,10 @@ fieldset[disabled] .btn-mdgray.active {
 .btn-dkgray.disabled:focus,
 .btn-dkgray.disabled:active,
 .btn-dkgray.disabled.active,
-.btn-dkgray[disabled]:hover,
-.btn-dkgray[disabled]:focus,
-.btn-dkgray[disabled]:active,
-.btn-dkgray[disabled].active,
+.btn-dkgray:disabled:hover,
+.btn-dkgray:disabled:focus,
+.btn-dkgray:disabled:active,
+.btn-dkgray:disabled.active,
 fieldset[disabled] .btn-dkgray:hover,
 fieldset[disabled] .btn-dkgray:focus,
 fieldset[disabled] .btn-dkgray:active,
@@ -612,10 +612,10 @@ fieldset[disabled] .btn-dkgray.active {
 .btn-yellow.disabled:focus,
 .btn-yellow.disabled:active,
 .btn-yellow.disabled.active,
-.btn-yellow[disabled]:hover,
-.btn-yellow[disabled]:focus,
-.btn-yellow[disabled]:active,
-.btn-yellow[disabled].active,
+.btn-yellow:disabled:hover,
+.btn-yellow:disabled:focus,
+.btn-yellow:disabled:active,
+.btn-yellow:disabled.active,
 fieldset[disabled] .btn-yellow:hover,
 fieldset[disabled] .btn-yellow:focus,
 fieldset[disabled] .btn-yellow:active,
@@ -647,10 +647,10 @@ fieldset[disabled] .btn-yellow.active {
 .btn-pink.disabled:focus,
 .btn-pink.disabled:active,
 .btn-pink.disabled.active,
-.btn-pink[disabled]:hover,
-.btn-pink[disabled]:focus,
-.btn-pink[disabled]:active,
-.btn-pink[disabled].active,
+.btn-pink:disabled:hover,
+.btn-pink:disabled:focus,
+.btn-pink:disabled:active,
+.btn-pink:disabled.active,
 fieldset[disabled] .btn-pink:hover,
 fieldset[disabled] .btn-pink:focus,
 fieldset[disabled] .btn-pink:active,
diff --git a/ui/css/treeherder-navbar-panels.css b/ui/css/treeherder-navbar-panels.css
index 88cc14d2b7f..5aef919b0b1 100644
--- a/ui/css/treeherder-navbar-panels.css
+++ b/ui/css/treeherder-navbar-panels.css
@@ -24,7 +24,7 @@
  *  Active Filters panel
  */
 .active-filters-bar {
-    padding: 5px 25px 5px 30px;
+    padding: 4px 25px 4px 30px;
 }
 
 .active-filters-title {
@@ -40,3 +40,11 @@
 .new-filter-input {
     margin-top: 5px;
 }
+
+.new-filter-input button,
+.new-filter-input input,
+.new-filter-input select {
+    margin-right: 5px;
+    padding-top: 3px;
+    border: 1px solid #ced4da;
+}
diff --git a/ui/css/treeherder-navbar.css b/ui/css/treeherder-navbar.css
index 546ce423c1d..e8fdb9217ab 100644
--- a/ui/css/treeherder-navbar.css
+++ b/ui/css/treeherder-navbar.css
@@ -10,21 +10,44 @@
 
 #th-global-navbar-top {
     padding-left: 0;
+    padding-top: 1px;
     border-bottom: 1px solid black;
+    justify-content: space-between;
+    display: flex;
+    width: 100%;
+    background-color: #222;
 }
 
 .navbar {
-    min-height: 36px;
-    margin-bottom: 0px;
-    border-radius: 0px;
+    padding: 0;
 }
 
-.navbar .dropdown-menu {
-    max-height: 600px;
-    min-width: 80px;
-    overflow: auto;
-    margin-top: 10px;
-    padding-bottom: 8px;
+#th-global-navbar-top .dropdown-menu {
+    top: inherit;
+}
+
+.dropdown-menu {
+    min-width: inherit;
+}
+
+.dropdown-menu > li > a {
+    font-weight: normal;
+    line-height: 1.42857143;
+    color: #333;
+    white-space: nowrap;
+}
+
+.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
+    color: #262626;
+    text-decoration: none;
+}
+
+label.dropdown-item {
+    margin-bottom: 0;
+}
+
+.dropdown-item input[type="checkbox"] {
+    margin-right: 5px;
 }
 
 #th-logo {
@@ -32,28 +55,24 @@
     border-left: 0;
 }
 
-.btn-right-navbar {
-   font-size: 13px;
-}
-
 /*
  * Right hand upper navbar
  */
 
-.navbar-right {
-    /* Override bootstrap 3.3.5 which doesn't work with the way we align our navbar */
-    margin-right: 0px;
-}
-
-.navbar-collapse {
-    /* Override bootstrap for flush right navbar menus */
-    padding-right: 0;
-}
+ .navbar-right {
+    display: flex;
+    justify-content: flex-end;
+ }
 
 .nav-menu-btn {
     margin-right: -4px;
     padding-left: 14px;
     padding-right: 14px;
+    font-size: 13px;
+}
+
+.nav-menu-btn:after {
+    font-size: 14px;
 }
 
 .nav-help-btn {
@@ -85,6 +104,8 @@
 .nav-login-btn {
     padding-left: 22px;
     padding-right: 27px;
+    color: lightgrey;
+    cursor: pointer;
 }
 
 .nav-logged-in-btn {
@@ -97,6 +118,11 @@
     overflow: visible;
 }
 
+login {
+    align-items: center;
+    display: flex;
+}
+
 /*
  * Left hand lower navbar
  */
@@ -120,6 +146,11 @@
 
 .watched-repo-navbar {
     overflow: visible;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    display: flex;
+    background-color: #354048;
 }
 
 .tree-closed {
@@ -138,36 +169,22 @@
     color: lightgray;
 }
 
-th-watched-repo {
-    /* Required for Chrome */
-    float: left;
-}
-
 /*
  * Right hand lower navbar
  */
 
-.revision-collapsed {
-    color: grey;
-}
-
 .group-state-nav-icon {
     width: 7px;
     display: inline-block;
 }
 
-.btn-collapse-resultsets {
-   margin-top: -1px;
-   margin-bottom: -1px;
-   font-size: 14px;
-}
-
 .btn-nav-filter {
     padding: 7px 2px;
 }
 
 #filter-chicklets .btn {
     font-size: 14px;
+    padding: 3px 2px 2px 2px;
 }
 
 .btn.btn-view-nav.btn-orange-filter-chicklet,
@@ -281,10 +298,10 @@ th-watched-repo {
 .btn-unclassified-failures.disabled:focus,
 .btn-unclassified-failures.disabled:active,
 .btn-unclassified-failures.disabled.active,
-.btn-unclassified-failures[disabled]:hover,
-.btn-unclassified-failures[disabled]:focus,
-.btn-unclassified-failures[disabled]:active,
-.btn-unclassified-failures[disabled].active,
+.btn-unclassified-failures:disabled:hover,
+.btn-unclassified-failures:disabled:focus,
+.btn-unclassified-failures:disabled:active,
+.btn-unclassified-failures:disabled.active,
 fieldset[disabled] .btn-unclassified-failures:hover,
 fieldset[disabled] .btn-unclassified-failures:focus,
 fieldset[disabled] .btn-unclassified-failures:active,
@@ -319,10 +336,10 @@ fieldset[disabled] .btn-unclassified-failures.active {
 .btn-view-nav.disabled:focus,
 .btn-view-nav.disabled:active,
 .btn-view-nav.disabled.active,
-.btn-view-nav[disabled]:hover,
-.btn-view-nav[disabled]:focus,
-.btn-view-nav[disabled]:active,
-.btn-view-nav[disabled].active,
+.btn-view-nav:disabled:hover,
+.btn-view-nav:disabled:focus,
+.btn-view-nav:disabled:active,
+.btn-view-nav:disabled.active,
 fieldset[disabled] .btn-view-nav:hover,
 fieldset[disabled] .btn-view-nav:focus,
 fieldset[disabled] .btn-view-nav:active,
@@ -352,10 +369,10 @@ fieldset[disabled] .btn-view-nav.active {
 .btn-view-nav-closed.disabled:focus,
 .btn-view-nav-closed.disabled:active,
 .btn-view-nav-closed.disabled.active,
-.btn-view-nav-closed[disabled]:hover,
-.btn-view-nav-closed[disabled]:focus,
-.btn-view-nav-closed[disabled]:active,
-.btn-view-nav-closed[disabled].active,
+.btn-view-nav-closed:disabled:hover,
+.btn-view-nav-closed:disabled:focus,
+.btn-view-nav-closed:disabled:active,
+.btn-view-nav-closed:disabled.active,
 fieldset[disabled] .btn-view-nav-closed:hover,
 fieldset[disabled] .btn-view-nav-closed:focus,
 fieldset[disabled] .btn-view-nav-closed:active,
@@ -404,48 +421,33 @@ fieldset[disabled] .btn-view-nav-closed.active {
   font-size: 10px;
 }
 
-.dropdown.open > #repo-dropdown {
-  width: 420px;
-  display: inline-grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-gap: 10px;
-  grid-auto-rows: minmax(150px, auto);
+#repo-dropdown {
+    min-width: 30rem;
+    max-height: 35rem;
+    overflow-x: hidden;
 }
 
-#repo-dropdown > .repogroup.even {
-  grid-column: 1;
+.dropdown-menu li {
+    list-style: none;
 }
 
-#repo-dropdown > .repogroup.odd {
-  grid-column: 2;
+.dropdown-header {
+    font-size: 12px;
 }
 
-#repo-dropdown .repogroup {
-  margin-left: 15px;
-  margin-top: 5px;
+.dropdown-link, .dropdown-link > a {
+    color: #212529cc;
+    padding-top: .5rem;
 }
 
-#filter-dropdown {
-    padding: 0 10px 10px 10px;
+#infra-dropdown {
+    min-width: 11rem;
 }
 
-#filter-dropdown .dropdown-header {
-    padding-top: 10px;
-}
-#filter-dropdown .dropdown-item {
-    list-style: none;
-    cursor: pointer;
-    padding-top: 6px;
-    margin: 0 0 1px 0;
-    font-weight: inherit;
+.checkbox-dropdown-menu .repogroup {
+    padding-left: 0;
 }
 
-#filter-dropdown .dropdown-item:hover {
+.dropdown-item:hover {
     background-color: #d3d3d34d;
 }
-
-#filter-dropdown .dropdown-divider {
-    border-top: 1px solid #a9a9a980;
-    padding-bottom: 5px;
-    margin-top: 7px;
-}
diff --git a/ui/css/treeherder-notifications.css b/ui/css/treeherder-notifications.css
index 81289b7a797..4d109b85c9a 100644
--- a/ui/css/treeherder-notifications.css
+++ b/ui/css/treeherder-notifications.css
@@ -18,10 +18,11 @@
 }
 
 #notification-box button.close {
-  position: relative;
-  top: -4px;
-  right: -8px;
   color: inherit;
+  line-height: 13px;
+  font-size: 18px;
+  padding-left: 10px;
+  margin-right: -7px;
 }
 
 /* Notification icon */
diff --git a/ui/css/treeherder-pinboard.css b/ui/css/treeherder-pinboard.css
index cc870203e2b..de86e9bc3ba 100644
--- a/ui/css/treeherder-pinboard.css
+++ b/ui/css/treeherder-pinboard.css
@@ -1,7 +1,14 @@
-.pinboard-btn {
-  margin-top: -1px;
-  background-color: #e6eef5 !important;
-  color: #252c33 !important;
+#job-tabs-navbar .info-panel-navbar #pinboard-btn {
+  margin-top: -2px;
+  background-color: #e6eef5;
+  color: #252c33;
+  line-height: 30px;
+  cursor: pointer;
+}
+
+.pinboard-btn-text {
+  margin: 0 15px;
+  font-size: 12px;
 }
 
 .pin-count-group {
@@ -198,6 +205,10 @@
   width: 70px;
 }
 
+.save-btn-group {
+  margin-top: -22px;
+}
+
 .save-btn {
   width: 81px;
 }
@@ -206,6 +217,17 @@
   width: 18px;
 }
 
+.save-btn-dropdown > .caret {
+  margin-left: -4px;
+}
+
+.save-btn-dropdown-menu {
+  right: 0;
+  left: -88px !important;
+  transform: inherit !important;
+  top: 22px !important;
+}
+
 .btn-group + .btn + .save-btn-dropdown {
   margin-left: -5px;
 }
diff --git a/ui/css/treeherder-resultsets.css b/ui/css/treeherder-resultsets.css
index 67b504de680..4ecf6160831 100644
--- a/ui/css/treeherder-resultsets.css
+++ b/ui/css/treeherder-resultsets.css
@@ -42,7 +42,6 @@
   margin-top: 2px;
   white-space: normal;
   width: 100%;
-  position: relative;
 }
 
 .result-counts {
@@ -63,6 +62,13 @@
 .btn-resultset {
   color: #666;
   background-color: transparent;
+  padding-left: 9px;
+  padding-right: 10px;
+}
+
+.btn-resultset.btn:focus {
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
 }
 
 .btn-resultset:hover {
@@ -73,15 +79,20 @@
 .btn-resultset.disabled:hover,
 .btn-resultset.disabled:active,
 .btn-resultset.disabled.active,
-.btn-resultset[disabled]:hover,
-.btn-resultset[disabled]:active,
-.btn-resultset[disabled].active,
+.btn-resultset:disabled:hover,
+.btn-resultset:disabled:active,
+.btn-resultset:disabled.active,
 fieldset[disabled] .btn-resultset:hover {
   background-color: #7c7a7d;
   border-color: #7c7a7d;
   color: white;
 }
 
+th-action-button .btn-resultset {
+  padding-left: 6px;
+  font-size: 14px;
+}
+
 /* Encompasses unknown push,resultset,repo */
 .unknown-message-body {
   padding-top: 10px;
@@ -109,8 +120,11 @@ fieldset[disabled] .btn-resultset:hover {
  * Revision list
  */
 
-.revision-list {
+revisions {
   overflow: hidden;
+}
+
+.revision-list {
   white-space: nowrap;
 }
 
@@ -164,6 +178,7 @@ fieldset[disabled] .btn-resultset:hover {
 .platform {
   font-size: 12px;
   padding: 0 5px 0 0;
+  line-height: 15px;
   width: 14.5em;
   min-width: 14.5em;
   overflow: hidden;
@@ -172,8 +187,11 @@ fieldset[disabled] .btn-resultset:hover {
 
 .job-row {
   display: table-cell;
+  line-height: 15px;
   white-space: normal;
   word-break: normal;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 .job-list table {
@@ -187,3 +205,19 @@ fieldset[disabled] .btn-resultset:hover {
 .job-list table tr:nth-child(even) {
   background: #f8f8f8;
 }
+
+.get-next {
+  flex-direction: row;
+  font-size: 14px;
+  background-color: #f5f5f5;
+  border: 1px solid #e3e3e3;
+}
+
+.get-next > span {
+  align-self: center;
+  padding-right: 8px;
+}
+
+.get-next .btn {
+  font-size: 12px;
+}
diff --git a/ui/entry-failureviewer.js b/ui/entry-failureviewer.js
index 6b2c7b8331c..48fe93c4012 100644
--- a/ui/entry-failureviewer.js
+++ b/ui/entry-failureviewer.js
@@ -20,7 +20,7 @@ require('angular-cookies');
 require('angular-sanitize');
 require('angular-local-storage');
 require('bootstrap/dist/js/bootstrap');
-require('angular-ui-bootstrap');
+require('angular1-ui-bootstrap4');
 require('./vendor/resizer.js');
 
 // Failureviewer JS
diff --git a/ui/entry-index.js b/ui/entry-index.js
index 1a9011c1770..4ca089de7c9 100644
--- a/ui/entry-index.js
+++ b/ui/entry-index.js
@@ -7,7 +7,6 @@ require('./js/config');
 // Styles
 require('bootstrap/dist/css/bootstrap.css');
 require('font-awesome/css/font-awesome.css');
-require('./vendor/css/bootstrap-non-responsive.css');
 require('./css/treeherder-global.css');
 require('./css/treeherder-navbar.css');
 require('./css/treeherder-navbar-panels.css');
@@ -28,7 +27,7 @@ require('angular-sanitize');
 require('angular-toarrayfilter');
 require('angular-local-storage');
 require('bootstrap/dist/js/bootstrap');
-require('angular-ui-bootstrap');
+require('angular1-ui-bootstrap4');
 require('mousetrap');
 require('js-yaml');
 require('angular-marked');
diff --git a/ui/entry-perf.js b/ui/entry-perf.js
index 634f67ec8ba..b90c2beee24 100644
--- a/ui/entry-perf.js
+++ b/ui/entry-perf.js
@@ -8,6 +8,7 @@ require('./js/config');
 // Styles
 require('bootstrap/dist/css/bootstrap.css');
 require('font-awesome/css/font-awesome.css');
+require('./css/treeherder-global.css');
 require('./css/treeherder-navbar.css');
 require('./css/perf.css');
 require('./css/treeherder-loading-overlay.css');
@@ -22,7 +23,7 @@ require('angular-sanitize');
 require('angular-local-storage');
 require('mousetrap');
 require('bootstrap/dist/js/bootstrap');
-require('angular-ui-bootstrap');
+require('angular1-ui-bootstrap4');
 require('./vendor/angular-clipboard.js');
 // The jquery flot package does not seem to be updated on npm, so we use a local version:
 require('./vendor/jquery.flot.js');
diff --git a/ui/failureviewer.html b/ui/failureviewer.html
index 861e02ac4f7..1aef9ee4a03 100644
--- a/ui/failureviewer.html
+++ b/ui/failureviewer.html
@@ -3,24 +3,25 @@
   <head>
     <meta charset="utf-8">
     <title>Failure Viewer</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link id="favicon" type="image/png" rel="shortcut icon" href="img/tree_open.png">
   </head>
   <body>
     <!-- Failureviewer navbar -->
-    <nav class="navbar navbar-default" role="navigation">
+    <nav class="navbar navbar-light bg-light" role="navigation">
       <div class="container-fluid">
-        <ul class="nav navbar-nav">
+        <ul class="nav navbar-row">
 
           <!-- Logo menu button -->
           <li>
             <span class="dropdown">
               <button id="fv-logo" title="Treeherder services" role="button"
-                      data-toggle="dropdown">Failure Viewer
-                <span class="fa fa-angle-down"></span>
+                      data-toggle="dropdown"
+                      class="dropdown-toggle">Failure Viewer
               </button>
               <ul class="dropdown-menu" role="menu" aria-labelledby="fv-logo">
-                <li><a href="/">Treeherder</a></li>
-                <li><a href="perf.html">Perfherder</a></li>
+                <li><a class="dropdown-item" href="/">Treeherder</a></li>
+                <li><a class="dropdown-item" href="perf.html">Perfherder</a></li>
               </ul>
             </span>
           </li>
@@ -39,7 +40,7 @@
     <!-- Failure lines table -->
     <div class="failure-line-list"
          ng-if="!isLoading">
-      <table class="table table-condensed" >
+      <table class="table table-sm" >
         <tr ng-repeat="line in cfList">
           <td>
             <div ng-if="line.test"><label>Test:</label> {{line.test}}</div>
diff --git a/ui/index.html b/ui/index.html
index 76c4262df89..d50988d2958 100755
--- a/ui/index.html
+++ b/ui/index.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="utf-8">
         <title ng-bind="getWindowTitle()">Treeherder</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <link id="favicon" type="image/png" rel="shortcut icon" href="img/tree_open.png">
         <th-favicon-link></th-favicon-link>
     </head>
@@ -13,7 +13,7 @@
                  ng-click="setOnscreenShortcutsShowing(false)">
                <div id="onscreen-shortcuts" ng-if="onscreenShortcutsShowing"
                     stop-propagation-on-left-click>
-                 <div class="col-xs-8">
+                 <div class="col-8">
                     <ng-include src="'partials/main/thShortcutTable.html'"></ng-include>
                  </div>
                </div>
@@ -46,10 +46,10 @@
         <script type="'text/ng-template'" id="resultsetClone.html">
             <div class="clearfix"></div>
             <div class="row result-set">
-                <span style="display:block;" class="revision-list col-xs-5">
+                <span style="display:block;" class="revision-list col-5">
                     <ul class="list-unstyled"></ul>
                 </span>
-                <span class="job-list col-xs-7 job-list-pad">
+                <span class="job-list col-7 job-list-pad">
                     <span class="fa fa-spinner fa-pulse th-spinner"></span>
                     <table id="{{ aggregateId }}" class="table-hover"></table>
                 </span>
diff --git a/ui/js/components/auth.js b/ui/js/components/auth.js
index 1bee2573d03..9e9c10b27c9 100644
--- a/ui/js/components/auth.js
+++ b/ui/js/components/auth.js
@@ -14,22 +14,19 @@ treeherder.component("login", {
               ng-if="$ctrl.user.loggedin">
           <button id="logoutLabel" title="Logged in as: {{$ctrl.user.email}}" role="button"
                   data-toggle="dropdown"
-                  class="btn btn-view-nav btn-right-navbar">
+                  class="btn btn-view-nav btn-right-navbar dropdown-toggle">
             <div class="nav-user-icon">
               <span class="fa fa-user pull-left"></span>
             </div>
-            <span class="fa fa-angle-down lightgray"></span>
           </button>
-          <ul class="dropdown-menu" role="menu" aria-labelledby="logoutLabel">
-              <li>
-                <a ng-click="$ctrl.logout()">Logout</a>
-              </li>
+          <ul class="dropdown-menu nav-dropdown-menu-right" role="menu" aria-labelledby="logoutLabel">
+              <li><a ng-click="$ctrl.logout()" class="dropdown-item">Logout</a></li>
           </ul>
         </span>
 
-        <a class="btn btn-view-nav btn-right-navbar nav-login-btn"
+        <span class="btn btn-right-navbar nav-login-btn"
            ng-if="!$ctrl.user.loggedin && $ctrl.userCanLogin && !ctrl.userLoggingIn"
-           ng-click="$ctrl.login()">Login/Register</a>
+           ng-click="$ctrl.login()">Login/Register</span>
         <span ng-if="$ctrl.userLoggingIn"
               class="midgray"
               title="User is already logging in">Logging In...</span>
diff --git a/ui/js/directives/treeherder/clonejobs.js b/ui/js/directives/treeherder/clonejobs.js
index 6f3b5a0c05b..cd28f519104 100644
--- a/ui/js/directives/treeherder/clonejobs.js
+++ b/ui/js/directives/treeherder/clonejobs.js
@@ -22,9 +22,9 @@ treeherder.directive('thCloneJobs', [
         var selectedCountCls = 'selected-count';
         var largeBtnCls = 'btn-lg-xform';
 
-        var col5Cls = 'col-xs-5';
-        var col7Cls = 'col-xs-7';
-        var col12Cls = 'col-xs-12';
+        var col5Cls = 'col-5';
+        var col7Cls = 'col-7';
+        var col12Cls = 'col-12';
         var jobListNoPadCls = 'job-list-nopad';
         var jobListPadCls = 'job-list-pad';
 
@@ -455,7 +455,7 @@ treeherder.directive('thCloneJobs', [
                 var ulEl = element.find('.revision-list');
 
                 _.extend(scope, { repo: $rootScope.currentRepo });
-                var revisionList = $compile('<revisions watch-depth="reference" resultset="resultset" repo="repo"></revisions>')(scope);
+                var revisionList = $compile('<revisions watch-depth="reference" resultset="resultset" repo="repo" class="col-5"></revisions>')(scope);
                 $(ulEl).replaceWith(revisionList);
 
             }
diff --git a/ui/js/reactrevisions.jsx b/ui/js/reactrevisions.jsx
index f4127282457..408bc4394b6 100644
--- a/ui/js/reactrevisions.jsx
+++ b/ui/js/reactrevisions.jsx
@@ -65,7 +65,7 @@ const RevisionList = (props) => {
     const linkifyBugsFilter = props.$injector.get('$filter')('linkifyBugs');
     const hasMore = props.resultset.revision_count > props.resultset.revisions.length;
     return (
-        <span className="revision-list col-xs-5">
+        <span className="revision-list col">
             <ul className="list-unstyled">
                 {props.resultset.revisions.map((revision, i) =>
                     <RevisionItem
diff --git a/ui/logviewer.html b/ui/logviewer.html
index 9d6923f5577..963c75eaa47 100644
--- a/ui/logviewer.html
+++ b/ui/logviewer.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title ng-bind="::logViewerTitle">Log viewer</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link id="favicon" type="image/png" rel="shortcut icon" href="img/logviewerIcon.png">
     <style>
       [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
@@ -12,20 +13,20 @@
   </head>
   <body class="body-logviewer">
     <!-- Logviewer navbar -->
-    <nav class="navbar navbar-default" role="navigation" ng-cloak>
+    <nav class="navbar navbar-light bg-light" role="navigation" ng-cloak>
       <div class="container-fluid">
-        <ul class="nav navbar-nav">
+        <ul class="nav mr-auto navbar-row">
 
           <!-- Logo menu button -->
           <li>
             <span class="dropdown">
               <button id="lv-logo" title="Treeherder services" role="button"
-                      data-toggle="dropdown">Logviewer
-                <span class="fa fa-angle-down"></span>
+                      data-toggle="dropdown"
+                      class="dropdown-toggle">Logviewer
               </button>
               <ul class="dropdown-menu" role="menu" aria-labelledby="lv-logo">
-                <li><a href="/">Treeherder</a></li>
-                <li><a href="perf.html">Perfherder</a></li>
+                <li><a class="dropdown-item" href="/">Treeherder</a></li>
+                <li><a class="dropdown-item" href="perf.html">Perfherder</a></li>
               </ul>
             </span>
           </li>
@@ -82,50 +83,51 @@
     </nav>
 
     <!-- Job header and steps navigation -->
-    <div class="run-data">
-      <div class="col-md-6" >
-        <div class="job-header">
-          <table class="table table-condensed" >
-            <tr ng-repeat="property in logProperties">
-              <th ng-cloak>{{property.label}}</th>
-              <td ng-if="property.label == 'Revision'" class="break-word">
-                <a href="{{::property.value | getRevisionUrl:repoName}}&selectedJob={{job_id}}"
-                   title="Open push"
-                   ng-cloak>{{property.value}}</a>
-              </td>
-              <td ng-if="property.label != 'Revision'"
-                  ng-cloak class="break-word">{{property.value}}</td>
-            </tr>
-            <tr ng-if="taskId" ng-cloak>
-              <th>
-                Task
-              </th>
-              <td>
-                <a href="{{ getInspectTaskUrl(taskId) }}">
-                  {{ taskId }}
-                </a>
-              </td>
-            </tr>
-            <tr ng-repeat="line in job_details | orderBy:'title'">
-              <th ng-cloak>
-                <span ng-if="line.title">
-                  {{line.title}}:
-                </span>
-              </th>
-              <td ng-cloak>
-                <a ng-if="line.url" title="{{line.value}}"
-                   href="{{line.url}}" target="_blank">{{line.value}}</a>
-                <span ng-if="!line.url" ng-bind-html="line.value"></span>
-              </td>
-            </tr>
-          </table>
+    <div class="run-data container-fluid">
+      <div class="row">
+        <div class="col" >
+          <div class="job-header">
+            <table class="table table-sm" >
+              <tr ng-repeat="property in logProperties">
+                <th ng-cloak>{{property.label}}</th>
+                <td ng-if="property.label == 'Revision'" class="break-word">
+                  <a href="{{::property.value | getRevisionUrl:repoName}}&selectedJob={{job_id}}"
+                     title="Open push"
+                     ng-cloak>{{property.value}}</a>
+                </td>
+                <td ng-if="property.label != 'Revision'"
+                    ng-cloak class="break-word">{{property.value}}</td>
+              </tr>
+              <tr ng-if="taskId" ng-cloak>
+                <th>
+                  Task
+                </th>
+                <td>
+                  <a href="{{ getInspectTaskUrl(taskId) }}">
+                    {{ taskId }}
+                  </a>
+                </td>
+              </tr>
+              <tr ng-repeat="line in job_details | orderBy:'title'">
+                <th ng-cloak>
+                  <span ng-if="line.title">
+                    {{line.title}}:
+                  </span>
+                </th>
+                <td ng-cloak>
+                  <a ng-if="line.url" title="{{line.value}}"
+                     href="{{line.url}}" target="_blank">{{line.value}}</a>
+                  <span ng-if="!line.url" ng-bind-html="line.value"></span>
+                </td>
+              </tr>
+            </table>
+          </div>
         </div>
+        <div class="col" lv-log-steps></div>
       </div>
-      <div class="col-md-6" lv-log-steps></div>
     </div>
 
     <th-log-viewer class="logview-container"></th-log-viewer>
-
     <th-notification-box></th-notification-box>
 
   </body>
diff --git a/ui/partials/logviewer/lvLogSteps.html b/ui/partials/logviewer/lvLogSteps.html
index bda5537b319..7a9907a6d50 100644
--- a/ui/partials/logviewer/lvLogSteps.html
+++ b/ui/partials/logviewer/lvLogSteps.html
@@ -25,7 +25,7 @@
            ng-class="{'lv-line-highlight': check}"
            ng-click="setDisplayedStep(error)"
            class="text-left pull-left lv-error-line">
-        <span class="label label-default lv-line-no text-left">
+        <span class="badge badge-secondary lv-line-no text-left">
           {{::error.line_number + 1}}
         </span>
 
diff --git a/ui/partials/main/intermittent.html b/ui/partials/main/intermittent.html
index ba8f6f6a4ea..105e9f2066b 100644
--- a/ui/partials/main/intermittent.html
+++ b/ui/partials/main/intermittent.html
@@ -1,6 +1,6 @@
 <div class="modal-header">
-  <button type="button" class="close" ng-click="cancelFiler()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
   <h4>Intermittent Bug Filer</h4>
+  <button type="button" class="close" ng-click="cancelFiler()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 </div>
 <div class="modal-body">
   <form id="modalForm">
diff --git a/ui/partials/main/jobs.html b/ui/partials/main/jobs.html
index c78b0a52f59..20ec8277de3 100755
--- a/ui/partials/main/jobs.html
+++ b/ui/partials/main/jobs.html
@@ -1,9 +1,9 @@
 <!-- Load progress bar -->
 <span class="hidden" ng-class="{'ready':jobsReady}"></span>
 
-<div class="progress progress-striped active"
+<div class="progress active"
      ng-show="isLoadingRsBatch.prepending && result_sets.length === 0">
-  <div class="progress-bar"  role="progressbar" style="width: 100%"></div>
+  <div class="progress-bar progress-bar-striped"  role="progressbar" style="width: 100%"></div>
 </div>
 
 <!-- Main resultset template -->
@@ -66,7 +66,7 @@
     </div>
   </div>
   <!-- Job table -->
-  <div class="result-set-body" th-clone-jobs ></div>
+  <div class="result-set-body row" th-clone-jobs ></div>
 </div>
 
 <!-- Resultset load errors -->
@@ -116,14 +116,14 @@
 <!-- End resultset clone target -->
 
 <!-- New resultsets progress bar -->
-<div class="progress progress-striped active"
+<div class="progress active"
      ng-show="isLoadingRsBatch.appending">
-  <div class="progress-bar"  role="progressbar" style="width: 100%"></div>
+  <div class="progress-bar progress-bar-striped "  role="progressbar" style="width: 100%"></div>
 </div>
 
 <!-- Get next resultsets footer -->
-<div class="well">
-     get next:
+<div class="card card-body get-next">
+  <span>get next:</span>
   <div class="btn-group">
     <div class="btn btn-light-bordered"
          ng-click="getNextResultSets(count, true)"
diff --git a/ui/partials/main/tcjobactions.html b/ui/partials/main/tcjobactions.html
index 6c292c8dc3d..4b6b22a94f9 100644
--- a/ui/partials/main/tcjobactions.html
+++ b/ui/partials/main/tcjobactions.html
@@ -1,6 +1,6 @@
 <div class="modal-header">
-  <button type="button" class="close" ng-click="cancel()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
   <h4 class="modal-title">Custom Taskcluster Job Actions</h4>
+  <button type="button" class="close" ng-click="cancel()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 </div>
 <div ng-if="!actions" class="modal-body">
   <p class="blink">Getting available actions ...</p>
diff --git a/ui/partials/main/thActionButton.html b/ui/partials/main/thActionButton.html
index 88fe4a28046..5c60a025f6c 100644
--- a/ui/partials/main/thActionButton.html
+++ b/ui/partials/main/thActionButton.html
@@ -1,9 +1,10 @@
-<span class="btn-group" uib-dropdown>
+<span class="btn-group dropdown" uib-dropdown>
   <button uib-dropdown-toggle
           class="btn btn-sm btn-resultset dropdown-toggle"
           type="button"
           title="Action menu"
           data-hover="dropdown"
+          data-toggle="dropdown"
           data-delay="1000"
           data-ignore-job-clear-on-click>
     <span class="caret" data-ignore-job-clear-on-click></span>
@@ -14,35 +15,35 @@
         class="{{user.loggedin ? '' : 'disabled'}}">
         <a target="_blank" data-ignore-job-clear-on-click
            title="Add new jobs to this push"
-           href=""
+           href="" class="dropdown-item"
            ng-hide="resultset.isRunnableVisible"
            ng-click="showRunnableJobs()">Add new jobs</a></li>
     <li><a target="_blank" data-ignore-job-clear-on-click
            title="Hide Runnable Jobs"
-           href=""
+           href="" class="dropdown-item"
            ng-show="resultset.isRunnableVisible"
            ng-click="deleteRunnableJobs()">Hide Runnable Jobs</a></li>
-    <li><a target="_blank" data-ignore-job-clear-on-click
+    <li><a target="_blank" data-ignore-job-clear-on-click class="dropdown-item"
            href="https://secure.pub.build.mozilla.org/buildapi/self-serve/{{::repoName}}/rev/{{::resultset.revision}}">BuildAPI</a></li>
     <li><a target="_blank" data-ignore-job-clear-on-click
-           href=""
+           href="" class="dropdown-item"
            ng-show="user.is_staff && triggerMissingRepos.includes(currentRepo.name)"
            ng-click="triggerMissingJobs(resultset.revision)">Trigger missing jobs</a></li>
     <li><a target="_blank" data-ignore-job-clear-on-click
-           href=""
+           href="" class="dropdown-item"
            ng-show="user.is_staff"
            ng-click="triggerAllTalosJobs(resultset.revision)">Trigger all Talos jobs</a></li>
-    <li><a target="_blank" data-ignore-job-clear-on-click
+    <li><a target="_blank" data-ignore-job-clear-on-click class="dropdown-item"
            href="https://bugherder.mozilla.org/?cset={{::resultset.revision}}&amp;tree={{::repoName}}"
            title="Use Bugherder to mark the bugs in this push">Mark with Bugherder</a></li>
     <li><a target="_blank" data-ignore-job-clear-on-click
-           href=""
+           href="" class="dropdown-item"
            ng-click="customPushAction()"
            title="View/Edit/Submit Action tasks for this push">Custom Push Action...</a></li>
-    <li><a target="_blank"
+    <li><a target="_blank" class="dropdown-item"
            href="{{toChangeValue()}}&tochange={{resultset.revision}}" prevent-default-on-left-click
            ng-click="jobFilters.addFilter('tochange', resultset.revision)">Set as top of range</a></li>
-    <li><a target="_blank"
+    <li><a target="_blank" class="dropdown-item"
            href="{{fromChangeValue()}}&fromchange={{resultset.revision}}" prevent-default-on-left-click
            ng-click="jobFilters.addFilter('fromchange', resultset.revision)">Set as bottom of range</a></li>
   </ul>
diff --git a/ui/partials/main/thGlobalTopNavPanel.html b/ui/partials/main/thGlobalTopNavPanel.html
index 4ea6632a8be..07cb384ee6e 100644
--- a/ui/partials/main/thGlobalTopNavPanel.html
+++ b/ui/partials/main/thGlobalTopNavPanel.html
@@ -1,15 +1,14 @@
-<nav id="th-global-navbar" class="navbar navbar-inverse">
-  <div id="th-global-navbar-top" class="navbar-collapse collapse">
+<nav id="th-global-navbar" class="navbar navbar-dark">
+  <div id="th-global-navbar-top">
 
     <!-- Logo Menu -->
     <span class="dropdown">
       <button id="th-logo" title="Treeherder services" role="button"
               data-toggle="dropdown"
-              class="btn btn-view-nav">Treeherder
-        <span class="fa fa-angle-down lightgray"></span>
+              class="btn btn-view-nav dropdown-toggle">Treeherder
       </button>
       <ul class="dropdown-menu" role="menu" aria-labelledby="th-logo">
-        <li><a href="perf.html">Perfherder</a></li>
+        <li><a href="perf.html" class="dropdown-item">Perfherder</a></li>
       </ul>
     </span>
 
@@ -21,7 +20,7 @@
                 class="btn btn-view-nav btn-right-navbar nav-menu-btn">
           <span class="fa fa-bell-o lightgray"></span>
         </button>
-        <ul id="notification-dropdown" class="dropdown-menu" role="menu" aria-labelledby="notificationLabel">
+        <ul id="notification-dropdown" class="dropdown-menu nav-dropdown-menu-right" role="menu" aria-labelledby="notificationLabel">
           <li role="presentation" class="dropdown-header" title="Notifications">
             Recent notifications
             <button class="btn btn-xs btn-light-bordered notification-dropdown-btn" title="Clear all notifications"
@@ -51,10 +50,9 @@
       <span class="dropdown">
         <button id="infraLabel" title="Infrastructure status" role="button"
                 data-toggle="dropdown"
-                class="btn btn-view-nav btn-right-navbar nav-menu-btn">Infra
-          <span class="fa fa-angle-down lightgray"></span>
+                class="btn btn-view-nav btn-right-navbar nav-menu-btn dropdown-toggle">Infra
         </button>
-        <ul class="dropdown-menu" role="menu" aria-labelledby="infraLabel"
+        <ul id="infra-dropdown" class="dropdown-menu nav-dropdown-menu-right container" role="menu" aria-labelledby="infraLabel"
             ng-include="'partials/main/thInfraMenu.html'">
         </ul>
       </span>
@@ -64,19 +62,22 @@
         <span th-checkbox-dropdown-container class="dropdown">
           <button id="repoLabel" title="Watch a repo" role="button"
                   data-toggle="dropdown"
-                  class="btn btn-view-nav btn-right-navbar nav-menu-btn">Repos
-            <span class="fa fa-angle-down lightgray"></span>
+                  class="btn btn-view-nav btn-right-navbar nav-menu-btn dropdown-toggle">Repos
           </button>
-          <ul id="repo-dropdown" class="dropdown-menu checkbox-dropdown-menu"
-              role="menu" aria-labelledby="repoLabel">
-            <span class="repogroup {{$even ? 'even' : 'odd'}}" ng-repeat="(group_order, group) in groupedRepos()">
-              <li role="presentation" class="dropdown-header" title="{{::group.repos[0].repository_group.description}}">
-                  {{::group.name}}
-                  <span ng-show="group.repos[0].repository_group.description" class="fa fa-info-circle"></span>
-              </li>
-              <th-repo-menu-item ng-repeat="repo in group.repos | orderBy : 'name'" ></th-repo-menu-item>
-            </span>
-          </ul>
+          <span id="repo-dropdown" class="dropdown-menu nav-dropdown-menu-right container">
+            <ul class="checkbox-dropdown-menu row"
+                role="menu" aria-labelledby="repoLabel"
+                aria-haspopup="true" aria-expanded="false">
+              <span class="repogroup dropdown-item col" ng-repeat="(group_order, group) in groupedRepos()">
+                <li role="presentation" class="dropdown-header" title="{{::group.repos[0].repository_group.description}}">
+                    {{::group.name}}
+                    <span ng-show="group.repos[0].repository_group.description" class="fa fa-info-circle"></span>
+                </li>
+                <th-repo-menu-item ng-repeat="repo in group.repos | orderBy : 'name'" ></th-repo-menu-item>
+                <div ng-if=$odd class="w-100"></div>
+              </span>
+            </ul>
+          </span>
         </span>
       </span>
 
@@ -85,11 +86,10 @@
         <span th-checkbox-dropdown-container class="dropdown">
           <button id="filterLabel" title="Set filters" role="button"
                   data-toggle="dropdown"
-                  class="btn btn-view-nav btn-right-navbar nav-menu-btn">Filters
-            <span class="fa fa-angle-down lightgray"></span>
+                  class="btn btn-view-nav btn-right-navbar nav-menu-btn dropdown-toggle">Filters
           </button>
           <ul id="filter-dropdown"
-              class="dropdown-menu checkbox-dropdown-menu"
+              class="dropdown-menu nav-dropdown-menu-right checkbox-dropdown-menu"
               role="menu" aria-labelledby="filterLabel">
             <span class="filtergroup" ng-repeat="(group_order, group) in filterGroups">
               <li role="presentation" class="dropdown-header">
@@ -112,13 +112,13 @@
               <input type="checkbox"
                      id="classified"
                      ng-model="classifiedFilter"
-                     ng-click="toggleClassifiedFilter()">classified
+                     ng-click="toggleClassifiedFilter()"> classified
             </label>
             <label class="dropdown-item">
               <input type="checkbox"
                      id="unclassified"
                      ng-model="unClassifiedFilter"
-                     ng-click="toggleUnClassifiedFilter()">un-classified
+                     ng-click="toggleUnClassifiedFilter()"> un-classified
             </label>
 
             <li class="dropdown-divider separator"></li>
@@ -137,14 +137,13 @@
       </span>
 
       <!-- Help Menu -->
-      <span class="dropdown">
+      <span id="help-menu" class="dropdown">
         <button id="helpLabel" title="Treeherder help" role="button"
                 data-toggle="dropdown"
-                class="btn btn-view-nav btn-right-navbar nav-help-btn">
+                class="btn btn-view-nav btn-right-navbar nav-help-btn dropdown-toggle">
           <span class="fa fa-question-circle lightgray nav-help-icon"></span>
-          <span class="fa fa-angle-down lightgray"></span>
         </button>
-        <ul class="dropdown-menu icon-menu" role="menu" aria-labelledby="helpLabel"
+        <ul class="dropdown-menu nav-dropdown-menu-right icon-menu" role="menu" aria-labelledby="helpLabel"
             ng-include="'partials/main/thHelpMenu.html'">
         </ul>
       </span>
diff --git a/ui/partials/main/thHelpMenu.html b/ui/partials/main/thHelpMenu.html
index cbd2fa0015e..170fccbc278 100644
--- a/ui/partials/main/thHelpMenu.html
+++ b/ui/partials/main/thHelpMenu.html
@@ -1,40 +1,48 @@
 <li>
-  <a href="userguide.html" target="_blank">
+  <a href="userguide.html" target="_blank"
+     class="dropdown-item">
     <span class="fa fa-question-circle midgray"></span>
     User Guide</a>
 </li>
 <li>
-  <a href="https://treeherder.readthedocs.io/" target="_blank">
+  <a href="https://treeherder.readthedocs.io/" target="_blank"
+     class="dropdown-item">
     <span class="fa fa-file-code-o midgray"></span>
     Development Documentation</a>
 </li>
 <li>
-  <a href="/docs/" target="_blank">
+  <a href="/docs/" target="_blank"
+     class="dropdown-item">
     <span class="fa fa-code midgray"></span>
     API Reference</a>
 </li>
 <li>
-  <a href="https://wiki.mozilla.org/EngineeringProductivity/Projects/Treeherder" target="_blank">
+  <a href="https://wiki.mozilla.org/EngineeringProductivity/Projects/Treeherder" target="_blank"
+     class="dropdown-item">
     <span class="fa fa-file-word-o midgray"></span>
     Project Wiki</a>
 </li>
 <li>
-  <a href="https://groups.google.com/forum/#!forum/mozilla.tools.treeherder" target="_blank">
+  <a href="https://groups.google.com/forum/#!forum/mozilla.tools.treeherder" target="_blank"
+     class="dropdown-item">
     <span class="fa fa-envelope-o midgray"></span>
     Mailing List</a>
 </li>
 <li>
-  <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Tree+Management&component=Treeherder" target="_blank">
+  <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Tree+Management&component=Treeherder" target="_blank"
+     class="dropdown-item">
     <span class="fa fa-bug midgray"></span>
     Report a Bug</a>
 </li>
 <li>
-  <a href="https://github.com/mozilla/treeherder" target="_blank">
+  <a href="https://github.com/mozilla/treeherder" target="_blank"
+     class="dropdown-item">
     <span class="fa fa-github midgray"></span>
     Source</a>
 </li>
 <li>
-  <a href="https://whatsdeployed.io/?owner=mozilla&amp;repo=treeherder&amp;name[]=Stage&amp;url[]=https://treeherder.allizom.org/revision.txt&amp;name[]=Prod&amp;url[]=https://treeherder.mozilla.org/revision.txt" target="_blank">
+  <a href="https://whatsdeployed.io/?owner=mozilla&amp;repo=treeherder&amp;name[]=Stage&amp;url[]=https://treeherder.allizom.org/revision.txt&amp;name[]=Prod&amp;url[]=https://treeherder.mozilla.org/revision.txt" target="_blank"
+     class="dropdown-item">
     <span class="fa fa-question midgray"></span>
     What's Deployed?</a>
 </li>
diff --git a/ui/partials/main/thInfraMenu.html b/ui/partials/main/thInfraMenu.html
index 5b0342ac335..79964dd9fdf 100644
--- a/ui/partials/main/thInfraMenu.html
+++ b/ui/partials/main/thInfraMenu.html
@@ -1,39 +1,39 @@
 <li role="presentation" class="dropdown-header">Buildbot</li>
 <li>
-  <a href="https://secure.pub.build.mozilla.org/buildapi/pending"
+  <a class="dropdown-item" href="https://secure.pub.build.mozilla.org/buildapi/pending"
      target="_blank">BuildAPI: Pending</a>
 </li>
 <li>
-  <a href="https://secure.pub.build.mozilla.org/buildapi/running"
+  <a class="dropdown-item" href="https://secure.pub.build.mozilla.org/buildapi/running"
      target="_blank">BuildAPI: Running</a>
 </li>
 <li>
-  <a href="https://www.hostedgraphite.com/da5c920d/86a8384e-d9cf-4208-989b-9538a1a53e4b/grafana2/#/dashboard/db/ec2-dashboard"
+  <a class="dropdown-item" href="https://www.hostedgraphite.com/da5c920d/86a8384e-d9cf-4208-989b-9538a1a53e4b/grafana2/#/dashboard/db/ec2-dashboard"
      target="_blank">EC2 Dashboard</a>
 </li>
 <li>
-  <a href="https://secure.pub.build.mozilla.org/builddata/reports/slave_health/"
+  <a class="dropdown-item" href="https://secure.pub.build.mozilla.org/builddata/reports/slave_health/"
      target="_blank">Slave Health</a>
 </li>
 <li>
-  <a href="https://api.pub.build.mozilla.org/clobberer/"
+  <a class="dropdown-item" href="https://api.pub.build.mozilla.org/clobberer/"
      target="_blank">Clobberer</a>
 </li>
-<li role="presentation" class="divider"></li>
+<li role="presentation" class="dropdown-divider"></li>
 <li role="presentation" class="dropdown-header">Other</li>
 <li>
-  <a href="https://mozilla-releng.net/treestatus"
+  <a class="dropdown-item" href="https://mozilla-releng.net/treestatus"
      target="_blank">TreeStatus</a>
 </li>
 <li>
-  <a href="https://nigelbabu.github.io/hgstats/"
+  <a class="dropdown-item" href="https://nigelbabu.github.io/hgstats/"
      target="_blank">HgStats</a>
 </li>
 <li>
-  <a href="https://tools.taskcluster.net/status/"
+  <a class="dropdown-item" href="https://tools.taskcluster.net/status/"
      target="_blank">TaskCluster</a>
 </li>
 <li>
-  <a href="https://futurama.theautomatedtester.co.uk"
+  <a class="dropdown-item" href="https://futurama.theautomatedtester.co.uk"
      target="_blank">Futurama</a>
 </li>
diff --git a/ui/partials/main/thPinboardPanel.html b/ui/partials/main/thPinboardPanel.html
index 915c446a393..ba81abb7dd1 100644
--- a/ui/partials/main/thPinboardPanel.html
+++ b/ui/partials/main/thPinboardPanel.html
@@ -75,7 +75,7 @@
 <!-- Save UI -->
 <div id="pinboard-controls" class="btn-group-vertical"
      title="{{!hasPinnedJobs() ? 'No pinned jobs' : ''}}">
-  <div class="btn-group">
+  <div class="btn-group save-btn-group dropdown">
     <button class="btn btn-light-bordered btn-xs save-btn"
             title="{{ saveUITitle('classification') }}"
             ng-click="save()"
@@ -84,24 +84,25 @@
     <button class="btn btn-light-bordered btn-xs dropdown-toggle save-btn-dropdown"
             title="{{ !hasPinnedJobs() ? 'No pinned jobs' : 'Additional pinboard functions' }}"
             ng-disabled="!hasPinnedJobs()"
+            type="button"
             data-toggle="dropdown">
       <span class="caret"></span>
     </button>
-    <ul class="dropdown-menu pull-right" role="menu">
+    <ul class="dropdown-menu save-btn-dropdown-menu">
       <li class="{{ !user.loggedin || !canSaveClassifications() ? 'disabled' : '' }}"
           title="{{ saveUITitle('classification') }}">
-        <a ng-click="!user.loggedin || !canSaveClassifications() || saveClassificationOnly()">Save classification only</a></li>
+        <a class="dropdown-item" ng-click="!user.loggedin || !canSaveClassifications() || saveClassificationOnly()">Save classification only</a></li>
       <li class="{{ !user.loggedin || !hasRelatedBugs() ? 'disabled' : '' }}"
           title="{{ saveUITitle('bug') }}">
-        <a ng-click="!user.loggedin || !canSaveClassifications() || !hasRelatedBugs() || saveBugsOnly()">Save bugs only</a></li>
+        <a class="dropdown-item" ng-click="!user.loggedin || !canSaveClassifications() || !hasRelatedBugs() || saveBugsOnly()">Save bugs only</a></li>
       <li class="{{ !user.loggedin ? 'disabled' : '' }}"
           title="{{ !user.loggedin ? 'Not logged in' : 'Repeat the pinned jobs'}}">
-        <a ng-click="!user.loggedin || retriggerAllPinnedJobs()">Retrigger all</a></li>
-        <li class="{{ canCancelAllPinnedJobs() ? '' : 'disabled' }}"
-            title="{{ cancelAllPinnedJobsTitle() }}">
-          <a ng-click="canCancelAllPinnedJobs() && cancelAllPinnedJobs()">Cancel all</a>
-        </li>
-      <li><a ng-click="unPinAll()">Clear all</a></li>
+        <a class="dropdown-item" ng-click="!user.loggedin || retriggerAllPinnedJobs()">Retrigger all</a></li>
+      <li class="{{ canCancelAllPinnedJobs() ? '' : 'disabled' }}"
+          title="{{ cancelAllPinnedJobsTitle() }}">
+        <a class="dropdown-item" ng-click="canCancelAllPinnedJobs() && cancelAllPinnedJobs()">Cancel all</a>
+      </li>
+      <li><a class="dropdown-item" ng-click="unPinAll()">Clear all</a></li>
     </ul>
   </div>
 </div>
diff --git a/ui/partials/main/thShortcutTable.html b/ui/partials/main/thShortcutTable.html
index b658eb4b636..eef7556ee3a 100644
--- a/ui/partials/main/thShortcutTable.html
+++ b/ui/partials/main/thShortcutTable.html
@@ -1,5 +1,5 @@
-<div class="panel panel-default">
-  <div class="panel-heading">
+<div class="card">
+  <div class="card-header">
     <h3>Keyboard shortcuts
       <a ng-show="onscreenShortcutsShowing"
          ng-click="setOnscreenShortcutsShowing(false)"
@@ -8,7 +8,7 @@ <h3>Keyboard shortcuts
       </a>
     </h3>
   </div>
-  <div class="panel-body panel-spacing">
+  <div class="card-body panel-spacing">
     <table id="shortcuts">
       <!-- Expose when onscreen help is complete - bug 1141569
       <tr><td><kbd>F1</kbd></td>
diff --git a/ui/partials/main/thWatchedRepo.html b/ui/partials/main/thWatchedRepo.html
index 48d30c8ab19..e112d9193f9 100644
--- a/ui/partials/main/thWatchedRepo.html
+++ b/ui/partials/main/thWatchedRepo.html
@@ -6,7 +6,7 @@
           title="{{titleText|stripHtml}}">
     <i class="fa {{statusIcon}} {{statusIconClass}} {{statusColor}}"></i> {{::watchedRepo}}
   </button>
-  <button class="watched-repo-info-btn btn btn-sm {{btnClass}} dropdown-toggle"
+  <button class="watched-repo-info-btn btn btn-sm {{btnClass}}"
           ng-class="{'active': watchedRepo===repoName}"
           ng-click="setDropDownPull($event)"
           type="button"
diff --git a/ui/partials/main/thWatchedRepoInfoDropDown.html b/ui/partials/main/thWatchedRepoInfoDropDown.html
index e9baa831d71..921d2ca5d63 100644
--- a/ui/partials/main/thWatchedRepoInfoDropDown.html
+++ b/ui/partials/main/thWatchedRepoInfoDropDown.html
@@ -1,21 +1,23 @@
-<ul class="dropdown-menu" role="menu">
+<ul class="dropdown-menu nav-dropdown-menu-right" role="menu">
   <li ng-show="reason" class="watched-repo-dropdown-item">
     <span ng-bind-html="reason|linkifyBugs"></span>
   </li>
-  <li class="divider" ng-show="reason && message_of_the_day"></li>
+  <li class="dropdown-divider" ng-show="reason && message_of_the_day"></li>
   <li ng-show="message_of_the_day" class="watched-repo-dropdown-item">
     <span ng-bind-html="message_of_the_day"></span>
   </li>
-  <li class="divider" ng-show="reason || message_of_the_day"></li>
+  <li class="dropdown-divider" ng-show="reason || message_of_the_day"></li>
   <li class="watched-repo-dropdown-item">
     <a href="https://mozilla-releng.net/treestatus/show/{{::treeStatus}}"
+       class="dropdown-item"
        target="_blank">Tree Status</a>
   </li>
   <li class="watched-repo-dropdown-item">
-    <a href="{{::pushlog}}" target="_blank">Pushlog</a>
+    <a href="{{::pushlog}}" class="dropdown-item" target="_blank">Pushlog</a>
   </li>
   <li class="watched-repo-dropdown-item">
     <a href="https://api.pub.build.mozilla.org/clobberer/?branch={{::name}}"
+       class="dropdown-item"
        target="_blank">Clobberer</a>
   </li>
 </ul>
diff --git a/ui/partials/main/thWatchedRepoNavPanel.html b/ui/partials/main/thWatchedRepoNavPanel.html
index bfd23a0b533..353c3fdf58e 100644
--- a/ui/partials/main/thWatchedRepoNavPanel.html
+++ b/ui/partials/main/thWatchedRepoNavPanel.html
@@ -1,10 +1,7 @@
-<div id="watched-repo-navbar" class="th-context-navbar watched-repo-navbar clearfix">
-
-  <th-watched-repo ng-repeat="watchedRepo in repoModel.watchedRepos"></th-watched-repo>
-
-  <div class="navbar-right">
-    <span>
-      <form role="search" class="form-inline">
+<div id="watched-repo-navbar" class="th-context-navbar navbar-dark watched-repo-navbar">
+  <span class="justify-content-between w-100 d-flex flex-wrap">
+    <span class="d-flex"><th-watched-repo ng-repeat="watchedRepo in repoModel.watchedRepos" /></span>
+    <form role="search" class="form-inline flex-row">
 
         <span class="btn btn-sm btn-view-nav nav-menu-btn"
               ng-show="serverChanged" ng-cloak
@@ -38,17 +35,16 @@
           <span id="tierLabel" role="button"
                   title="Show/hide job tiers"
                   data-toggle="dropdown"
-                  class="btn btn-view-nav btn-sm nav-menu-btn">Tiers
-            <span class="fa fa-angle-down lightgray"></span>
+                  class="btn btn-view-nav btn-sm nav-menu-btn dropdown-toggle">Tiers
           </span>
           <ul class="dropdown-menu checkbox-dropdown-menu"
               role="menu">
             <li ng-repeat="tier in jobFilters.tiers">
-              <div class="checkbox dropdown-link">
-                <label title="{{(isSingleTierSelected() && tiers[tier] == true) ? 'Must have at least one tier selected at all times' : ''}}">
+              <div>
+                <label title="{{(isSingleTierSelected() && tiers[tier] == true) ? 'Must have at least one tier selected at all times' : ''}}"
+                       class="dropdown-item">
                   <input id="tier-checkbox"
                          type="checkbox"
-                         class="dropdown-checkboxk"
                          ng-model="tiers[tier]"
                          ng-disabled="isSingleTierSelected() && tiers[tier] == true"
                          ng-change="tierToggled(tier)">tier {{::tier}}
@@ -107,7 +103,7 @@
               id="quick-filter-parent"
               class="form-group form-inline">
           <input id="quick-filter"
-                 class="form-control input-sm" required
+                 class="form-control form-control-sm" required
                  title="Click to enter filter values"
                  ng-model="searchQueryStr" ng-keydown="search($event)" type="text"
                  placeholder="Filter platforms & jobs"
@@ -117,7 +113,6 @@
                 title="Clear this filter"
                 ng-click="clearFilterBox()"></span>
         </span>
-      </form>
-    </span>
-  </div>
+    </form>
+  </span>
 </div>
diff --git a/ui/partials/perf/alertsctrl.html b/ui/partials/perf/alertsctrl.html
index 63dd1000095..98adf7c1540 100644
--- a/ui/partials/perf/alertsctrl.html
+++ b/ui/partials/perf/alertsctrl.html
@@ -3,7 +3,7 @@
     You must be logged into perfherder/treeherder and be a sheriff to make changes
   </div>
   <form class="form-inline">
-    <span ng-if="!alertId" ng-cloak>
+    <span ng-if="!alertId" ng-cloak class="alert-selects d-flex">
       <div class="form-group">
         <select ng-model="filterOptions.status"
                 ng-options="status.text for status in statuses track by status.id"
@@ -37,8 +37,8 @@
   <p class="lead text-center" ng-show="alertSummaries && !alertSummaries.length">
     No alerts for framework "{{filterOptions.framework.name}}" with status "{{filterOptions.status.text}}"
   </p>
-  <div class="panel panel-default alert-summary" ng-repeat="alertSummary in alertSummaries" ng-if="alertSummary.anyVisible">
-    <div class="panel-heading alert-summary-heading">
+  <div class="card alert-summary" ng-repeat="alertSummary in alertSummaries" ng-if="alertSummary.anyVisible">
+    <div class="card-header alert-summary-heading">
       <div class="alert-summary-header-element">
         <input type="checkbox" ng-disabled="!user.is_staff" ng-model="alertSummary.allSelected" ng-change="selectNoneOrSelectAll(alertSummary)"/><!-- select 'em all checkbox -->
       </div>
@@ -50,12 +50,12 @@
         {{alertSummary.resultSetMetadata.dateStr}}
         ·
         <span ng-if="alertSummary.resultSetMetadata && alertSummary.resultSetMetadata" title="{{alertSummary.resultSetMetadata.comments}}" uib-dropdown>
-          <button id="push-dropdown" class="btn btn-link dropdown" uib-dropdown-toggle>
-            {{alertSummary.resultSetMetadata.revision | limitTo: 12}}<span class="caret"></span>
+          <button id="push-dropdown" class="btn btn-link dropdown" uib-dropdown-toggle data-toggle="dropdown">
+            {{alertSummary.resultSetMetadata.revision | limitTo: 12}}
           </button>
           <ul class="uib-dropdown-menu" uib-dropdown-menu aria-labelledby="push-dropdown">
-            <li role="menuitem"><a href="{{alertSummary.jobsURL}}" target="_blank">Jobs</a></li>
-            <li role="menuitem"><a href="{{alertSummary.pushlogURL}}" target="_blank">Pushlog</a></li>
+            <li role="menuitem"><a href="{{alertSummary.jobsURL}}" target="_blank" class="dropdown-item">Jobs</a></li>
+            <li role="menuitem"><a href="{{alertSummary.pushlogURL}}" target="_blank" class="dropdown-item">Pushlog</a></li>
           </ul>
         </span>
         <span ng-show="alertSummary.bug_number"> ·
@@ -72,37 +72,36 @@
       </div>
       <div class="alert-summary-header-element alert-summary-date">
         <div class="btn-group" uib-dropdown>
-          <button id="status-dropdown" class="btn btn-link status-dropdown" uib-dropdown-toggle>
+          <button id="status-dropdown" class="btn btn-link status-dropdown" uib-dropdown-toggle data-toggle="dropdown">
 {{alertSummary.getStatusText()}}
-            <span class="caret"></span>
           </button>
           <ul class="uib-dropdown-menu" uib-dropdown-menu aria-labelledby="status-dropdown">
             <li role="menuitem">
-              <a ng-click="copyTextToClipboard(alertSummary)">Copy Summary</a>
+              <a ng-click="copyTextToClipboard(alertSummary)" class="dropdown-item">Copy Summary</a>
             </li>
             <li role="menuitem" ng-show="!alertSummary.bug_number">
-              <a ng-click="fileBug(alertSummary)">File bug</a>
+              <a ng-click="fileBug(alertSummary)" class="dropdown-item">File bug</a>
             </li>
             <li role="menuitem" ng-show="!alertSummary.bug_number && user.is_staff">
-              <a ng-click="linkToBug(alertSummary)">Link to bug</a>
+              <a ng-click="linkToBug(alertSummary)" class="dropdown-item">Link to bug</a>
             </li>
             <li role="menuitem" ng-show="alertSummary.bug_number && user.is_staff">
-              <a ng-click="unlinkBug(alertSummary)">Unlink from bug</a>
+              <a ng-click="unlinkBug(alertSummary)" class="dropdown-item">Unlink from bug</a>
             </li>
             <li role="menuitem" ng-show="user.is_staff" ng-if="alertSummary.isResolved()">
-              <a ng-click="alertSummary.markInvestigating()">Re-open</a>
+              <a ng-click="alertSummary.markInvestigating()" class="dropdown-item">Re-open</a>
             </li>
             <li role="menuitem" ng-show="user.is_staff"
                 ng-if="alertSummary.isInvestigating() || (alertSummary.isResolved() && !alertSummary.isWontfix())">
-              <a ng-click="alertSummary.markWontfix()">Mark as "won't fix"</a>
+              <a ng-click="alertSummary.markWontfix()" class="dropdown-item">Mark as "won't fix"</a>
             </li>
             <li role="menuitem" ng-show="user.is_staff"
                 ng-if="alertSummary.isInvestigating() || (alertSummary.isResolved() && !alertSummary.isBackedout())">
-              <a ng-click="alertSummary.markBackedout()">Mark as backed out</a>
+              <a ng-click="alertSummary.markBackedout()" class="dropdown-item">Mark as backed out</a>
             </li>
             <li role="menuitem" ng-show="user.is_staff"
                 ng-if="alertSummary.isInvestigating() || (alertSummary.isResolved() && !alertSummary.isFixed())">
-              <a ng-click="alertSummary.markFixed()">Mark as fixed</a>
+              <a ng-click="alertSummary.markFixed()" class="dropdown-item">Mark as fixed</a>
             </li>
           </ul>
         </div>
@@ -183,7 +182,7 @@
         </td>
       </tr>
     </table>
-    <div class="panel-body" ng-show="alertSummary.downstreamSummaryIds.length">
+    <div class="card-body" ng-show="alertSummary.downstreamSummaryIds.length">
       <p class="text-muted">
         Downstream alert summaries:
         <span class="text-muted" ng-repeat="summaryId in alertSummary.downstreamSummaryIds" >
@@ -196,7 +195,7 @@
         </span>
       </p>
     </div>
-    <div class="panel-body" uib-collapse="!anySelected(alertSummary.alerts)">
+    <div class="card-body" uib-collapse="!anySelected(alertSummary.alerts)">
       <button ng-if="anySelectedAndTriaged(alertSummary.alerts)" class="btn btn-warning" role="button"
               ng-click="resetAlerts(alertSummary)" title="Reset selected alerts to untriaged">
         Reset
@@ -227,10 +226,9 @@
     {{numFilteredAlertSummaries}} alerts not displayed because they had no changes matching filter criteria
   </p>
 </div>
-
-<div class="text-center">
-    <uib-pagination ng-model="alertSummaryCurrentPage" ng-change="getAlertSummariesPage()"
-                    ng-show="alertSummaryCount > alertSummaryPageSize" max-size="10"
-                    total-items="alertSummaryCount" items-per-page="alertSummaryPageSize"
-                    rotate="false" boundary-link-numbers="true"></uib-pagination>
+<div class="d-flex justify-content-center md-18">
+    <ul uib-pagination ng-model="alertSummaryCurrentPage" ng-change="getAlertSummariesPage()"
+        ng-show="alertSummaryCount > alertSummaryPageSize" max-size="10"
+        total-items="alertSummaryCount" items-per-page="alertSummaryPageSize"
+        rotate="false" boundary-link-numbers="true"></ul>
 </div>
diff --git a/ui/partials/perf/comparechooserctrl.html b/ui/partials/perf/comparechooserctrl.html
index 3790c4e206a..73af6a4087b 100644
--- a/ui/partials/perf/comparechooserctrl.html
+++ b/ui/partials/perf/comparechooserctrl.html
@@ -4,9 +4,9 @@
     <div class="spacer"></div>
     <div class="form-group">
       <div class="spacer"></div>
-      <div class="panel panel-default centered-element">
-        <div class="panel-heading">Base</div>
-        <div class="panel-body">
+      <div class="card centered-element">
+        <div class="card-header">Base</div>
+        <div class="card-body">
           <label for="original-project-selector">Project</label>
           <select id="original-project-selector" class="form-control" ng-model="originalProject" ng-options="project.name for project in projects"  ng-change="updateOriginalRevisionTips()"/>
           <div class="checkbox">
@@ -17,39 +17,39 @@
           </div>
           <div ng-show="revisionComparison">
             <label for="original-revision-input">Revision</label>
-            <div class="form-group input-group" ng-class="{'has-error': originalRevisionError}">
+            <div class="input-group" ng-class="{'has-danger': originalRevisionError}">
               <input id="original-revision-input" maxlength="40" class="form-control" type="text" ng-model="originalRevision" placeholder="Select or enter a revision"/>
               <div class="input-group-btn">
                 <button type="button" class="btn btn-light-bordered dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                  Recent <span class="caret"></span></button>
+                  Recent</button>
                 <ul class="dropdown-menu dropdown-menu-right" ng-model="tipRevision">
-                  <li ng-repeat="tip in originalTipList"><a ng-click="getOriginalTipRevision(tip.revision)">{{tip.revision | limitTo: 12}} {{tip.author}}</a></li>
+                  <li ng-repeat="tip in originalTipList"><a ng-click="getOriginalTipRevision(tip.revision)" class="dropdown-item">{{tip.revision | limitTo: 12}} {{tip.author}}</a></li>
                 </ul>
               </div>
             </div>
           </div>
         </div>
-        <label class="control-label" style="color:#A94442" ng-show="originalRevisionError">{{originalRevisionError}}"</label>
+        <label class="form-control-label" style="color:#A94442" ng-show="originalRevisionError">{{originalRevisionError}}"</label>
       </div>
-      <div class="panel panel-default centered-element">
-        <div class="panel-heading">New</div>
-        <div class="panel-body">
+      <div class="card centered-element">
+        <div class="card-header">New</div>
+        <div class="card-body">
           <label for="new-project-selector">Project</label>
           <select id="new-project-selector" class="form-control" ng-model="newProject" ng-options="project.name for project in projects" ng-change="updateNewRevisionTips();getPreviousRevision()"></select>
           <label for="new-revision-input">Revision</label>
-          <div class="form-group input-group" ng-class="{'has-error': newRevisionError}">
+          <div class="input-group" ng-class="{'has-danger': newRevisionError}">
             <input id="new-revision-input" maxlength="40" class="form-control" type="text" ng-model="newRevision" placeholder="Select or enter a revision"/>
             <div class="input-group-btn">
               <button type="button" class="btn btn-light-bordered dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                Recent <span class="caret"></span></button>
-              <ul class="dropdown-menu dropdown-menu-right" >
-                <li ng-repeat="tip in newTipList"><a ng-click="getNewTipRevision(tip.revision);">
+                Recent</button>
+              <ul class="dropdown-menu dropdown-menu-right">
+                <li ng-repeat="tip in newTipList"><a ng-click="getNewTipRevision(tip.revision);" class="dropdown-item">
                     {{tip.revision | limitTo: 12}} {{tip.author}}
                 </a></li>
               </ul>
             </div>
           </div>
-          <label class="control-label" style="color:#A94442" ng-show="newRevisionError">{{newRevisionError}}</label>
+          <label class="form-control-label" style="color:#A94442" ng-show="newRevisionError">{{newRevisionError}}</label>
         </div>
       </div>
       <div class="spacer"></div>
diff --git a/ui/partials/perf/comparetable.html b/ui/partials/perf/comparetable.html
index e9d738d9dea..0df022c11bf 100644
--- a/ui/partials/perf/comparetable.html
+++ b/ui/partials/perf/comparetable.html
@@ -38,7 +38,7 @@
   </div>
 </form>
 <hr/>
-<table class="table table-condensed compare-table" style="table-layout: fixed;" ng-repeat="compareResults in $ctrl.filteredResultList | orderBy: 'testName' track by compareResults.testName">
+<table class="table table-sm compare-table" style="table-layout: fixed;" ng-repeat="compareResults in $ctrl.filteredResultList | orderBy: 'testName' track by compareResults.testName">
   <tbody>
     <tr class="subtest-header">
       <!-- Manually specify table widths because it's just easier this way -->
diff --git a/ui/partials/perf/helpMenu.html b/ui/partials/perf/helpMenu.html
index 74a3f538343..d2aa130c8d8 100644
--- a/ui/partials/perf/helpMenu.html
+++ b/ui/partials/perf/helpMenu.html
@@ -1,25 +1,25 @@
 <li>
-  <a href="https://treeherder.readthedocs.io/" target="_blank">
+  <a class="dropdown-item" href="https://treeherder.readthedocs.io/" target="_blank">
     <span class="fa fa-file-code-o midgray"></span>
     Development Documentation</a>
 </li>
 <li>
-  <a href="/docs/" target="_blank">
+  <a class="dropdown-item" href="/docs/" target="_blank">
     <span class="fa fa-code midgray"></span>
     API Reference</a>
 </li>
 <li>
-  <a href="https://wiki.mozilla.org/EngineeringProductivity/Projects/Perfherder" target="_blank">
+  <a class="dropdown-item" href="https://wiki.mozilla.org/EngineeringProductivity/Projects/Perfherder" target="_blank">
     <span class="fa fa-file-word-o midgray"></span>
     Project Wiki</a>
 </li>
 <li>
-  <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Tree%20Management&component=Perfherder" target="_blank">
+  <a class="dropdown-item" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Tree%20Management&component=Perfherder" target="_blank">
     <span class="fa fa-bug midgray"></span>
     Report a Bug</a>
 </li>
 <li>
-  <a href="https://github.com/mozilla/treeherder" target="_blank">
+  <a class="dropdown-item" href="https://github.com/mozilla/treeherder" target="_blank">
     <span class="fa fa-github midgray"></span>
     Source</a>
 </li>
diff --git a/ui/partials/perf/modifyalertsctrl.html b/ui/partials/perf/modifyalertsctrl.html
index 15814e813ef..c08d28d29fe 100644
--- a/ui/partials/perf/modifyalertsctrl.html
+++ b/ui/partials/perf/modifyalertsctrl.html
@@ -1,12 +1,12 @@
 <form name="modifyAlert" ng-submit="modify()">
 <div class="modal-header">
+  <h3 class="modal-title">{{title}}</h3>
   <button type="button" class="close" ng-model="closeButton" ng-show="!modifying" ng-click="cancel()">
     <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
   </button>
-  <h3 class="modal-title">{{title}}</h3>
 </div>
 <div class="modal-body">
-      <div class="form-group" ng-class="{'has-error': modifyAlert.newId.$invalid}">
+      <div class="form-group" ng-class="{'has-danger': modifyAlert.newId.$invalid}">
         <input class="form-control"
                ng-model="newId"
                ng-pattern="/^[1-9]+[0-9]*$/"
diff --git a/ui/partials/perf/revisiondescribe.html b/ui/partials/perf/revisiondescribe.html
index 3bade194b9a..19495970082 100644
--- a/ui/partials/perf/revisiondescribe.html
+++ b/ui/partials/perf/revisiondescribe.html
@@ -1,14 +1,14 @@
 <ul class="list-inline push-information">
-  <li ng-if = "$ctrl.originalRevision">
+  <li ng-if = "$ctrl.originalRevision" class="list-inline-item">
     <strong>Base</strong> - <a href="{{$ctrl.originalRevision | getRevisionUrl:$ctrl.originalProject.name}}">{{$ctrl.originalRevision | limitTo: 12}}</a>
     ({{$ctrl.originalProject.name}}) - {{$ctrl.originalResultSet.author}} -
     <span>{{$ctrl.originalResultSet.comments}}</span>
   </li>
-  <li ng-if = "$ctrl.selectedTimeRange">
+  <li ng-if = "$ctrl.selectedTimeRange" class="list-inline-item">
     <strong>Base</strong> - <a href="{{$ctrl.originalRevision | getRevisionUrl:$ctrl.originalProject.name}}">{{$ctrl.originalRevision | limitTo: 12}}</a>
     {{$ctrl.originalProject.name}} - {{$ctrl.selectedTimeRange.text}}
   </li>
-  <li>
+  <li class="list-inline-item">
     <strong>New</strong> - <a href="{{$ctrl.newRevision | getRevisionUrl:$ctrl.newProject.name}}">{{$ctrl.newRevision | limitTo: 12}}</a> ({{$ctrl.newProject.name}}) - {{$ctrl.newResultSet.author}} -
     <span>{{$ctrl.newResultSet.comments}}</span>
   </li>
diff --git a/ui/partials/perf/testdatachooser.html b/ui/partials/perf/testdatachooser.html
index 7fd6bc55c61..52d351f768d 100644
--- a/ui/partials/perf/testdatachooser.html
+++ b/ui/partials/perf/testdatachooser.html
@@ -1,6 +1,6 @@
 <div class="modal-header">
-  <button type="button" class="close" ng-click="cancel()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
   <h4 class="modal-title">Add test data</h4>
+  <button type="button" class="close" ng-click="cancel()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 </div>
 <div class="modal-body" ng-show="!loadingRelatedSignatures">
     <p class="blink" >Getting related test information ...</p>
@@ -28,7 +28,7 @@ <h4 class="modal-title">Add test data</h4>
       <div class="test-loading-placeholder" ng-show="loadingTestData">
         <p class="blink">Loading series data...</p>
       </div>
-      <input class="form-control input-sm" type="text" ng-model="testFilter" placeholder="Filter tests" ng-model-options="{debounce: 250}" ng-hide="loadingTestData"/>
+      <input class="form-control form-control-sm" type="text" ng-model="testFilter" placeholder="Filter tests" ng-model-options="{debounce: 250}" ng-hide="loadingTestData"/>
       <select ng-hide="loadingPlatformList || loadingTestData" multiple class="form-control choose-test-list" ng-model="selectedTestSignatures" ng-hide="loadingTestData">
         <option value="{{::testElem.signature}}" ng-repeat="testElem in unselectedTestList| testNameContainsWords: testFilter track by testElem.signature" title="{{::testElem.name}}">
           {{::testElem.name}}
diff --git a/ui/partials/perf/trendtable.html b/ui/partials/perf/trendtable.html
index fde7d15a0e8..04822a22384 100644
--- a/ui/partials/perf/trendtable.html
+++ b/ui/partials/perf/trendtable.html
@@ -38,7 +38,7 @@
   </div>
 </form>
 <hr/>
-<table class="table table-condensed compare-table" style="table-layout: fixed;" ng-repeat="compareResults in $ctrl.filteredResultList | orderBy: 'testName' track by compareResults.testName">
+<table class="table table-sm compare-table" style="table-layout: fixed;" ng-repeat="compareResults in $ctrl.filteredResultList | orderBy: 'testName' track by compareResults.testName">
   <tbody>
     <tr class="subtest-header">
       <!-- Manually specify table widths because it's just easier this way -->
diff --git a/ui/perf.html b/ui/perf.html
index 177ad143a4f..1b3bd5fffd4 100644
--- a/ui/perf.html
+++ b/ui/perf.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="utf-8">
     <title>Perfherder</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link id="favicon" type="image/png" rel="shortcut icon" href="img/line_chart.png">
     <style>
       [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
@@ -17,12 +18,11 @@
         <span class="dropdown">
           <button id="th-logo"
                   title="Treeherder services" role="button"
-                  class="btn btn-view-nav"
+                  class="btn btn-view-nav dropdown-toggle"
                   data-toggle="dropdown">Perfherder
-            <span class="fa fa-angle-down lightgray"></span>
           </button>
           <ul class="dropdown-menu" role="menu" aria-labelledby="perf-logo">
-            <li><a href="/">Treeherder</a></li>
+            <li><a href="/" class="dropdown-item">Treeherder</a></li>
           </ul>
         </span>
         <a ng-class="{active: $state.includes('graphs')}" class="btn btn-view-nav" ui-sref="graphs">Graphs</a>
@@ -32,26 +32,24 @@
         <span class="dropdown">
           <button id="dashboardLabel" title="Dashboard" role="button"
                   data-toggle="dropdown"
-                  class="btn btn-view-nav">Dashboard
-            <span class="fa fa-angle-down lightgray"></span>
+                  class="btn btn-view-nav dropdown-toggle">Dashboard
           </button>
           <ul class="dropdown-menu icon-menu" role="menu">
-            <li><a ui-sref="dashboard({topic: 'e10s'})"><span class="fa fa-bar-chart midgray"></span> e10s</a></li>
-            <li><a ui-sref="e10s_trend"><span class="fa fa-line-chart midgray"></span> e10s-trend</a></li>
-            <li><a ui-sref="dashboard({topic: 'hasal', repo: 'mozilla-central'})"><span class="fa fa-bar-chart midgray"></span> hasal</a></li>
+            <li><a ui-sref="dashboard({topic: 'e10s'})" class="dropdown-item"><span class="fa fa-bar-chart midgray"></span> e10s</a></li>
+            <li><a ui-sref="e10s_trend" class="dropdown-item"><span class="fa fa-line-chart midgray"></span> e10s-trend</a></li>
+            <li><a ui-sref="dashboard({topic: 'hasal', repo: 'mozilla-central'})" class="dropdown-item"><span class="fa fa-bar-chart midgray"></span> hasal</a></li>
           </ul>
         </span>
       </span>
-      <div class="nav navbar-nav navbar-right">
+      <div class="nav navbar-right">
         <!-- Help Menu -->
         <span class="dropdown">
           <button id="helpLabel" title="Perfherder help" role="button"
                   data-toggle="dropdown"
-                  class="btn btn-view-nav btn-right-navbar nav-help-btn">
+                  class="btn btn-view-nav btn-right-navbar nav-help-btn dropdown-toggle">
             <span class="fa fa-question-circle lightgray nav-help-icon"></span>
-            <span class="fa fa-angle-down lightgray"></span>
           </button>
-          <ul class="dropdown-menu icon-menu" role="menu" aria-labelledby="helpLabel"
+          <ul class="dropdown-menu nav-dropdown-menu-right icon-menu" role="menu" aria-labelledby="helpLabel"
               ng-include="'partials/perf/helpMenu.html'">
           </ul>
         </span>
diff --git a/ui/plugins/annotations/main.html b/ui/plugins/annotations/main.html
index 90a9c8ab52c..bed4ad7e227 100644
--- a/ui/plugins/annotations/main.html
+++ b/ui/plugins/annotations/main.html
@@ -1,5 +1,5 @@
 <div ng-controller="AnnotationsPluginCtrl" class="annotations-panel">
-    <div class="col-xs-10 classifications-pane job-tabs-content">
+    <div class="col-sm-10 classifications-pane job-tabs-content">
         <table class="table-super-condensed table-hover">
             <thead ng-hide="classifications.length < 1">
                 <tr><th>Classified</th><th>Author</th><th>Classification</th><th>Comment</th></tr>
@@ -30,7 +30,7 @@
         </table>
         <div ng-show="classifications.length < 1">This job has not been classified</div>
     </div>
-    <div class="col-xs-2 bug-list-pane">
+    <div class="col-sm-2 bug-list-pane">
         <div class="annotations-bug-header" ng-hide="classifications.length < 1"><strong>Bugs</strong></div>
         <ul class="annotations-bug-list">
             <li ng-repeat="bug in bugs">
diff --git a/ui/plugins/auto_classification/errorLine.html b/ui/plugins/auto_classification/errorLine.html
index f849a0a3bb7..82d888dae2a 100644
--- a/ui/plugins/auto_classification/errorLine.html
+++ b/ui/plugins/auto_classification/errorLine.html
@@ -2,13 +2,13 @@
 
 <div ng-if="line.verified">
   <a ng-if="!line.verifiedIgnore"
-     class="label label-xs label-primary"
+     class="badge badge-xs badge-primary"
      title="This line is verified"
      target="_blank"
      ng-href="/failureviewer.html#/?classified_failure_id={{line.data.classifiedFailureId}}">Verified</a>
 
   <span ng-if="line.verifiedIgnore"
-        class="label label-xs label-ignored"
+        class="badge badge-xs badge-ignored"
         title="This line is ignored">Ignored</span>
 </div>
 
@@ -93,6 +93,7 @@
       <li>
         <a ng-if="hasHidden(options)"
            ng-click="$parent.showHidden = !$parent.showHidden"
+           class="link-style"
            role="button">
           <!-- note we have to use ng-hide rather than ng-if here otherwise the
                node gets taken out of the dom which interferes with the did-we-click-a-link
diff --git a/ui/plugins/auto_classification/staticOption.html b/ui/plugins/auto_classification/staticOption.html
index 7c8d3601af7..8ec9083fcef 100644
--- a/ui/plugins/auto_classification/staticOption.html
+++ b/ui/plugins/auto_classification/staticOption.html
@@ -45,6 +45,7 @@
 </span>
 <div>
   <a ng-click="$ctrl.onExpandOptions()"
+     class="link-style"
      role="button">
     Edit…
   </a>
diff --git a/ui/plugins/pluginpanel.html b/ui/plugins/pluginpanel.html
index b31f71e73dc..b0f1d8310eb 100755
--- a/ui/plugins/pluginpanel.html
+++ b/ui/plugins/pluginpanel.html
@@ -11,7 +11,7 @@
 <div id="info-panel-content">
   <div id="job-details-panel">
     <div id="job-details-actionbar">
-      <nav class="navbar info-panel-navbar">
+      <nav class="navbar navbar-dark info-panel-navbar">
         <ul class="nav navbar-nav actionbar-nav">
 
           <li ng-repeat="job_log_url in job_log_urls">
@@ -68,17 +68,12 @@
             </a>
           </li>
           <li>
-            <!--the first 3 items are in the same box-->
-            <ul class="nav navbar-nav">
-              <li>
-                <a id="pin-job-btn" href=""
-                   title="Add this job to the pinboard"
-                   class="icon-blue"
-                   ng-click="pinboard_service.pinJob(selectedJob)">
-                  <span class="fa fa-thumb-tack"></span>
-                </a>
-              </li>
-            </ul>
+            <a id="pin-job-btn" href=""
+               title="Add this job to the pinboard"
+               class="icon-blue"
+               ng-click="pinboard_service.pinJob(selectedJob)">
+              <span class="fa fa-thumb-tack"></span>
+            </a>
           </li>
           <li>
             <button id="retrigger-btn" href=""
@@ -107,30 +102,32 @@
             </a>
           </li>
         </ul>
-        <ul class="nav navbar-nav navbar-right">
-          <li>
-            <button id="actionbar-menu-btn"
+        <ul class="nav navbar-right">
+          <li class="dropdown">
+            <span id="actionbar-menu-btn"
                title="Other job actions"
+               aria-haspopup="true" aria-expanded="false"
                class="dropdown-toggle"
+               type="button"
                data-toggle="dropdown">
               <span class="fa fa-ellipsis-h" aria-hidden="true"></span>
-            </button>
+            </span>
             <ul class="dropdown-menu actionbar-menu" role="menu">
               <li class="{{ canBackfill() ? '' : 'disabled' }}">
                 <a ng-attr-title="{{ backfillButtonTitle() }}"
+                   class="dropdown-item"
                    ng-click="!canBackfill() || backfillJob()">Backfill</a>
               </li>
               <li ng-if-start="job.taskcluster_metadata">
-                <a target="_blank" href="{{ getInspectTaskUrl(job.taskcluster_metadata.task_id) }}">Inspect Task</a>
+                <a target="_blank" class="dropdown-item" href="{{ getInspectTaskUrl(job.taskcluster_metadata.task_id) }}">Inspect Task</a>
               </li>
-              <li>
-                <a target="_blank" href="{{ getInspectTaskUrl(job.taskcluster_metadata.task_id) }}/create">Edit and Retrigger</a>
+              <li><a target="_blank" class="dropdown-item" href="{{ getInspectTaskUrl(job.taskcluster_metadata.task_id) }}/create">Edit and Retrigger</a>
               </li>
               <li>
-                <a target="_blank" href="https://tools.taskcluster.net/one-click-loaner/#{{job.taskcluster_metadata.task_id}}">One Click Loaner</a>
+                <a target="_blank" class="dropdown-item" href="https://tools.taskcluster.net/one-click-loaner/#{{job.taskcluster_metadata.task_id}}">One Click Loaner</a>
               </li>
               <li ng-if-end>
-                <a ng-click="customJobAction()">Custom Action...</a>
+                <a ng-click="customJobAction()" class="dropdown-item">Custom Action...</a>
               </li>
             </ul>
           </li>
@@ -268,10 +265,10 @@
         </ul>
 
         <ul class="nav navbar-nav info-panel-navbar-controls">
-          <li>
-            <a href="" ng-click="togglePinboardVisibility()"
-               class="pinboard-btn">
-              <div ng-attr-title="{{isPinboardVisible ? 'Close the pinboard' : 'Open the pinboard'}}">Pinboard
+          <li ng-click="togglePinboardVisibility()"
+              id="pinboard-btn">
+              <div ng-attr-title="{{isPinboardVisible ? 'Close the pinboard' : 'Open the pinboard'}}"
+                   class="pinboard-btn-text">Pinboard
                 <div ng-if="pinboard_service.count.numPinnedJobs"
                      title="{{getCountPinnedTitle()}}"
                      class="pin-count-group"
@@ -282,7 +279,6 @@
                 </div>
                 <span class="fa" ng-class="isPinboardVisible ? 'fa-angle-down' : 'fa-angle-up'"></span>
               </div>
-            </a>
           </li>
           <li>
             <a title="Close the job panel" href="" ng-click="closeJob()">
diff --git a/ui/plugins/similar_jobs/main.html b/ui/plugins/similar_jobs/main.html
index 08156a26127..15a3806503c 100755
--- a/ui/plugins/similar_jobs/main.html
+++ b/ui/plugins/similar_jobs/main.html
@@ -8,7 +8,7 @@
                     </thead>
                     <tbody>
                         <tr ng-click="show_job_info(similar_job)"
-                            ng-class="{'active': similar_job_selected.id===similar_job.id}"
+                            ng-class="{'table-active': similar_job_selected.id===similar_job.id}"
                             ng-repeat="similar_job in similar_jobs">
                             <td>
                                 <button
@@ -97,7 +97,7 @@
                         <tr>
                             <th>Classification</th>
                             <td>
-                                <label class="label {{ similar_job_selected.failure_classification.star }}">
+                                <label class="badge {{ similar_job_selected.failure_classification.star }}">
                                     {{ similar_job_selected.failure_classification.name }}
                                 </label>
                             </td>
diff --git a/ui/userguide.html b/ui/userguide.html
index d924aa09af1..6cbc1250066 100644
--- a/ui/userguide.html
+++ b/ui/userguide.html
@@ -3,14 +3,15 @@
 <head>
   <meta charset="utf-8">
   <title>Treeherder User Guide</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link id="favicon" type="image/png" rel="shortcut icon" href="img/tree_open.png">
 </head>
 
 <body ng-controller="UserguideCtrl" id="userguide">
   <!-- Content panel -->
-  <div class="panel panel-default">
+  <div class="card">
     <!-- Header -->
-    <div class="panel-heading">
+    <div class="card-header">
       <h1>Treeherder User Guide</h1>
       <h5>Want to contribute?
         <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Tree+Management&amp;component=Treeherder">
@@ -28,15 +29,15 @@ <h5>Want to contribute?
     </div>
 
     <!-- Start of interior panels -->
-    <div class="panel-body">
+    <div class="card-body">
       <div class="row">
         <!-- Job Notation table -->
-        <div class="col-xs-6">
-          <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="col-6">
+          <div class="card">
+            <div class="card-header">
               <h3>Job notation</h3>
             </div>
-            <div class="panel-body">
+            <div class="card-body">
               <table id="legend-other">
                 <tr>
                   <th>
@@ -128,16 +129,16 @@ <h3>Job notation</h3>
         </div>
 
         <!-- Shortcuts table -->
-        <div class="col-xs-6">
+        <div class="col-6">
           <ng-include id="th-shortcut-table"
                       src="'partials/main/thShortcutTable.html'"></ng-include>
         </div>
 
             <!-- Copy values on hover table -->
-        <div class="col-xs-6">
-          <div class="panel panel-default">
-            <div class="panel-heading"><h3>Copy values on hover</h3></div>
-            <div class="panel-body panel-spacing">
+        <div class="col-6">
+          <div class="card">
+            <div class="card-header"><h3>Copy values on hover</h3></div>
+            <div class="card-body panel-spacing">
               <table id="shortcuts">
                 <tr>
                   <td><kbd>ctrl/cmd</kbd><kbd>c</kbd></td>
@@ -169,12 +170,12 @@ <h3>Job notation</h3>
 
       <div class="row">
         <!-- Builds table -->
-        <div class="col-xs-6">
-          <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="col-6">
+          <div class="card">
+            <div class="card-header">
               <h3>Builds</h3>
             </div>
-            <div class="panel-body panel-spacing">
+            <div class="card-body panel-spacing">
               <table id="legend-builds" class="ug-btn-sm ug-btn-desc">
                 <tr><th><button>B</button></th>
                   <td>Build</td></tr>
@@ -274,12 +275,12 @@ <h3>Builds</h3>
         </div>
 
         <!-- Tests table -->
-        <div class="col-xs-6">
-          <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="col-6">
+          <div class="card">
+            <div class="card-header">
               <h3>Tests</h3>
             </div>
-            <div class="panel-body panel-spacing">
+            <div class="card-body panel-spacing">
               <table id="legend-tests" class="ug-btn-sm ug-btn-desc">
                 <tr><th><button>Mb</button></th>
                   <td>Mozbase Unit Tests</td></tr>
@@ -407,12 +408,12 @@ <h3>Tests</h3>
 
       <!-- Query string params -->
       <div class="row">
-        <div class="col-xs-12">
-          <div class="panel panel-default">
-            <div class="panel-heading">
+        <div class="col-12">
+          <div class="card">
+            <div class="card-header">
               <h3>URL Query String Parameters</h3>
             </div>
-            <div class="panel-body panel-spacing">
+            <div class="card-body panel-spacing">
               <table id="queryparams">
                 <tr>
                   <td><span class="queryparam">nojobs</span></td>
@@ -449,8 +450,8 @@ <h3>URL Query String Parameters</h3>
     </div>
 
     <!-- Credits and Whats Deployed -->
-    <div class="panel-footer ug-footer">
-      <div class="col-xs-6">
+    <div class="card-footer ug-footer row">
+      <div class="col-6">
         <div>Some icons by
           <a href="http://www.freepik.com" title="Freepik">Freepik</a> from
           <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> licensed under
@@ -458,8 +459,8 @@ <h3>URL Query String Parameters</h3>
              title="Creative Commons BY 3.0">CC BY 3.0</a>
         </div>
       </div>
-      <div class="col-xs-6">
-        <a class="midgray pull-right"
+      <div class="col-6 float-right">
+        <a class="midgray float-right"
            href="http://whatsdeployed.io/?owner=mozilla&amp;repo=treeherder&amp;name[]=Stage&amp;url[]=https://treeherder.allizom.org/revision.txt&amp;name[]=Prod&amp;url[]=https://treeherder.mozilla.org/revision.txt">What's Deployed?</a>
       </div>
     </div>
diff --git a/ui/vendor/css/bootstrap-non-responsive.css b/ui/vendor/css/bootstrap-non-responsive.css
deleted file mode 100644
index 774b871985e..00000000000
--- a/ui/vendor/css/bootstrap-non-responsive.css
+++ /dev/null
@@ -1,73 +0,0 @@
-/* These make the bootstrap navbar unresponsive (Taken from: http://getbootstrap.com/examples/non-responsive/non-responsive.css */
-
-/* Always float the navbar header */
-.navbar-header {
-  float: left;
-}
-
-/* Undo the collapsing navbar */
-.navbar-collapse {
-  display: block !important;
-  height: auto !important;
-  padding-bottom: 0;
-  overflow: visible !important;
-}
-
-.navbar-toggle {
-  display: none;
-}
-.navbar-collapse {
-  border-top: 0;
-}
-
-.navbar-brand {
-  margin-left: -8px;
-  margin-right: -7px;
-}
-
-/* Always apply the floated nav */
-.navbar-nav {
-  float: left;
-  margin: 0;
-}
-.navbar-nav > li {
-  float: left;
-}
-.navbar-nav > li > a {
-  padding: 15px;
-}
-
-/* Redeclare since we override the float above */
-.navbar-nav.navbar-right {
-  float: right;
-}
-
-/* Undo custom dropdowns */
-.navbar .navbar-nav .open .dropdown-menu {
-  position: absolute;
-  float: left;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0, 0, 0, .15);
-  border-width: 0 1px 1px;
-  border-radius: 0 0 4px 4px;
-  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
-          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
-}
-.navbar-default .navbar-nav .open .dropdown-menu > li > a {
-  color: #333;
-}
-.navbar .navbar-nav .open .dropdown-menu > li > a:hover,
-.navbar .navbar-nav .open .dropdown-menu > li > a:focus,
-.navbar .navbar-nav .open .dropdown-menu > .active > a,
-.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
-.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
-  color: #fff !important;
-  background-color: #428bca !important;
-}
-.navbar .navbar-nav .open .dropdown-menu > .disabled > a,
-.navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover,
-.navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus {
-  color: #999 !important;
-  background-color: transparent !important;
-}
diff --git a/yarn.lock b/yarn.lock
index 290d2e093bb..55e86cc4f0a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -131,16 +131,16 @@ angular-toarrayfilter@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/angular-toarrayfilter/-/angular-toarrayfilter-1.0.2.tgz#a81dcb0c9f3c39985f8fd4424dbe1dbea84771c4"
 
-angular-ui-bootstrap@1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/angular-ui-bootstrap/-/angular-ui-bootstrap-1.3.3.tgz#4820f895d433c17abeb4ac7387f2f122cbf8c11c"
-
 angular-ui-router@0.4.3:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/angular-ui-router/-/angular-ui-router-0.4.3.tgz#6c29546fe50b8d2f74614dcb8660d6fc40d6e167"
   dependencies:
     angular "^1.0.8"
 
+angular1-ui-bootstrap4@2.4.22:
+  version "2.4.22"
+  resolved "https://registry.yarnpkg.com/angular1-ui-bootstrap4/-/angular1-ui-bootstrap4-2.4.22.tgz#378697405c957b96f947f42322f36660cd3fc88d"
+
 angular@1.5.11:
   version "1.5.11"
   resolved "https://registry.yarnpkg.com/angular/-/angular-1.5.11.tgz#8c5ba7386f15965c9acf3429f6881553aada30d6"
@@ -1199,9 +1199,9 @@ boom@5.x.x:
   dependencies:
     hoek "4.x.x"
 
-bootstrap@3.3.7:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
+bootstrap@4.0.0-beta.2:
+  version "4.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0-beta.2.tgz#4d67d2aa2219f062cd90bc1247e6747b9e8fd051"
 
 brace-expansion@^1.1.7:
   version "1.1.8"
@@ -5127,6 +5127,10 @@ pluralize@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
 
+popper.js@1.12.6:
+  version "1.12.6"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.12.6.tgz#91e12a97b07815258b76915d64044e8ac053d426"
+
 portfinder@^1.0.9:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"