diff --git a/src/root/Makefile.am b/src/root/Makefile.am
index 506bf5974..f3e52cdda 100644
--- a/src/root/Makefile.am
+++ b/src/root/Makefile.am
@@ -8,7 +8,7 @@ STATIC = \
   static/js/jquery/jquery-ui-1.10.4.min.js
 
 FLOT = flot-0.8.3.zip
-BOOTSTRAP = bootstrap-2.3.1.zip
+BOOTSTRAP = bootstrap-4.3.1-dist.zip
 
 ZIPS = $(FLOT) $(BOOTSTRAP)
 
@@ -26,4 +26,4 @@ install-data-local: $(ZIPS)
 	mkdir -p $(hydradir)/static/js
 	cp -prvd $(srcdir)/static/js/* $(hydradir)/static/js
 	mkdir -p $(hydradir)/static/bootstrap
-	cp -prvd $(srcdir)/static/bootstrap/* $(hydradir)/static/bootstrap
+	cp -prvd $(srcdir)/static/$(basename $(BOOTSTRAP))/* $(hydradir)/static/bootstrap
diff --git a/src/root/auth.tt b/src/root/auth.tt
index b2466019f..360904d95 100644
--- a/src/root/auth.tt
+++ b/src/root/auth.tt
@@ -31,26 +31,26 @@
 [% ELSE %]
 
   <div id="hydra-signin" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
-    <form class="form-horizontal">
-      <div class="modal-body">
-        <div class="control-group">
-          <label class="control-label">User name</label>
-          <div class="controls">
-            <input type="text" class="span3" name="username" value=""/>
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <form>
+          <div class="modal-body">
+            <div class="form-group">
+              <label for="username" class="col-form-label">User name</label>
+              <input type="text" class="form-control" name="username"/>
+            </div>
+            <div class="form-group">
+              <label for="password" class="col-form-label">Password</label>
+              <input type="password" class="form-control" name="password"/>
+            </div>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label">Password</label>
-          <div class="controls">
-            <input type="password" class="span3" name="password" value=""/>
+          <div class="modal-footer">
+            <button id="do-signin" type="button" class="btn btn-primary">Sign in</button>
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
           </div>
-        </div>
+        </form>
       </div>
-      <div class="modal-footer">
-        <button id="do-signin" class="btn btn-primary">Sign in</button>
-        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
-      </div>
-    </form>
+    </div>
   </div>
 
   <script>
diff --git a/src/root/bootstrap-2.3.1.zip b/src/root/bootstrap-2.3.1.zip
deleted file mode 100644
index e4f27746a..000000000
Binary files a/src/root/bootstrap-2.3.1.zip and /dev/null differ
diff --git a/src/root/bootstrap-4.3.1-dist.zip b/src/root/bootstrap-4.3.1-dist.zip
new file mode 100644
index 000000000..b96620934
Binary files /dev/null and b/src/root/bootstrap-4.3.1-dist.zip differ
diff --git a/src/root/build.tt b/src/root/build.tt
index f62647046..f6db4fbe2 100644
--- a/src/root/build.tt
+++ b/src/root/build.tt
@@ -114,41 +114,38 @@ END;
 [% END %]
 
 <ul class="nav nav-tabs">
-  <li class="dropdown">
-    <a class="dropdown-toggle actions" data-toggle="dropdown" href="#">
-      Actions
-      <b class="caret"></b>
-    </a>
-    <ul class="dropdown-menu">
+  <li class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" area-haspopup="true" aria-expanded="false">Actions</a>
+    <div class="dropdown-menu">
       [% IF eval.nixexprinput || eval.flake %]
-        <li><a href="#reproduce" data-toggle="modal">Reproduce locally</a></li>
+        <a class="dropdown-item" href="#reproduce" data-toggle="modal">Reproduce locally</a>
       [% END %]
       [% IF c.user_exists %]
         [% IF available %]
           [% IF build.keep %]
-            <li><a href="[% c.uri_for('/build' build.id 'keep' 0) %]">Unkeep</a></li>
+            <a class="dropdown-item" href="[% c.uri_for('/build' build.id 'keep' 0) %]">Unkeep</a>
           [% ELSE %]
-            <li><a href="[% c.uri_for('/build' build.id 'keep' 1) %]">Keep</a></li>
+            <a class="dropdown-item" href="[% c.uri_for('/build' build.id 'keep' 1) %]">Keep</a>
           [% END %]
         [% END %]
         [% IF build.finished %]
-          <li><a href="[% c.uri_for('/build' build.id 'restart') %]">Restart</a></li>
+          <a class="dropdown-item" href="[% c.uri_for('/build' build.id 'restart') %]">Restart</a>
         [% ELSE %]
-          <li><a href="[% c.uri_for('/build' build.id 'cancel') %]">Cancel</a></li>
-          <li><a href="[% c.uri_for('/build' build.id 'bump') %]">Bump up</a></li>
+          <a class="dropdown-item" href="[% c.uri_for('/build' build.id 'cancel') %]">Cancel</a>
+          <a class="dropdown-item" href="[% c.uri_for('/build' build.id 'bump') %]">Bump up</a>
         [% END %]
       [% END %]
-    </ul>
+    </div>
   </li>
 
-  <li class="active"><a href="#tabs-summary" data-toggle="tab">Summary</a></li>
-  [% IF isAggregate %]<li><a href="#tabs-constituents" data-toggle="tab">Constituents</a></li>[% END %]
-  <li><a href="#tabs-details" data-toggle="tab">Details</a></li>
-  <li><a href="#tabs-buildinputs" data-toggle="tab">Inputs</a></li>
-  [% IF steps.size() > 0 %]<li><a href="#tabs-buildsteps" data-toggle="tab">Build steps</a></li>[% END %]
-  [% IF build.dependents %]<li><a href="#tabs-usedby" data-toggle="tab">Used by</a></li>[% END%]
-  [% IF drvAvailable %]<li><a href="#tabs-build-deps" data-toggle="tab">Build dependencies</a></li>[% END %]
-  [% IF localStore && available %]<li><a href="#tabs-runtime-deps" data-toggle="tab">Runtime dependencies</a></li>[% END %]
+  <li class="nav-item"><a class="nav-link active" href="#tabs-summary" data-toggle="tab">Summary</a></li>
+  [% IF isAggregate %]<li class="nav-item"><a class="nav-link" href="#tabs-constituents" data-toggle="tab">Constituents</a></li>[% END %]
+  <li class="nav-item"><a class="nav-link" href="#tabs-details" data-toggle="tab">Details</a></li>
+  <li class="nav-item"><a class="nav-link" href="#tabs-buildinputs" data-toggle="tab">Inputs</a></li>
+  [% IF steps.size() > 0 %]<li class="nav-item"><a class="nav-link" href="#tabs-buildsteps" data-toggle="tab">Build steps</a></li>[% END %]
+  [% IF build.dependents %]<li class="nav-item"><a class="nav-link" href="#tabs-usedby" data-toggle="tab">Used by</a></li>[% END%]
+  [% IF drvAvailable %]<li class="nav-item"><a class="nav-link" href="#tabs-build-deps" data-toggle="tab">Build dependencies</a></li>[% END %]
+  [% IF localStore && available %]<li class="nav-item"><a class="nav-link" href="#tabs-runtime-deps" data-toggle="tab">Runtime dependencies</a></li>[% END %]
 </ul>
 
 <div id="generic-tabs" class="tab-content">
@@ -489,22 +486,23 @@ END;
 
 </div>
 
-
 <div id="reproduce" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
-  [% url = c.uri_for('/build' build.id 'reproduce') %]
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      [% url = c.uri_for('/build' build.id 'reproduce') %]
 
-  <div class="modal-header">
-    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-    <h3>Reproduce this build</h3>
-  </div>
+      <div class="modal-header">
+        <h3>Reproduce this build</h3>
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+      </div>
 
-  <div class="modal-body">
+      <div class="modal-body">
 
     [% IF eval.flake %]
 
-    <p>If you have <a href='https://nixos.org/nix/download.html'>Nix
-    installed</a>, you can reproduce this build on your own machine by
-    running the following command:</p>
+        <p>If you have <a href='https://nixos.org/nix/download.html'>Nix
+        installed</a>, you can reproduce this build on your own machine by
+        running the following command:</p>
 
 <pre>
 <span class="shell-prompt"># </span>nix build [% HTML.escape(eval.flake) %]#hydraJobs.[% HTML.escape(job) %]
@@ -512,14 +510,14 @@ END;
 
     [% ELSE %]
 
-    <p>If you have <a href='https://nixos.org/nix/download.html'>Nix
-    installed</a>, you can reproduce this build on your own machine by
-    downloading <a [% HTML.attributes(href => url) %]>a script</a>
-    that checks out all inputs of the build and then invokes Nix to
-    perform the build.</p>
+        <p>If you have <a href='https://nixos.org/nix/download.html'>Nix
+        installed</a>, you can reproduce this build on your own machine by
+        downloading <a [% HTML.attributes(href => url) %]>a script</a>
+        that checks out all inputs of the build and then invokes Nix to
+        perform the build.</p>
 
-    <p>To download and execute the script from the command line, run the
-    following command:</p>
+        <p>To download and execute the script from the command line, run the
+        following command:</p>
 
 <pre>
 <span class="shell-prompt"># </span>curl <a [% HTML.attributes(href => url) %]>[% HTML.escape(url) %]</a> | bash
@@ -527,10 +525,12 @@ END;
 
     [% END %]
 
-  </div>
+      </div>
 
-  <div class="modal-footer">
-    <a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
+      <div class="modal-footer">
+        <a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
+      </div>
+    </div>
   </div>
 </div>
 
diff --git a/src/root/common.tt b/src/root/common.tt
index 4dfee8c14..16c0b4343 100644
--- a/src/root/common.tt
+++ b/src/root/common.tt
@@ -182,7 +182,7 @@ BLOCK renderSelection;
         [% END %]
       </div>
     [% ELSE %]
-      <select style='width: 15em;' [% HTML.attributes(id => param, name => param) %]>
+      <select class="custom-select" [% HTML.attributes(id => param, name => param) %]>
         [% FOREACH name IN options.keys.sort %]
           <option [% IF name == curValue; "selected='selected'"; END; " "; HTML.attributes(value => name) %]>[% options.$name %]</option>
         [% END %]
@@ -405,11 +405,11 @@ BLOCK renderInputDiff; %]
 
 
 BLOCK renderPager %]
-  <ul class="pager">
-    <li [% IF page == 1 %]class="disabled"[% END %]><a href="[% "$baseUri?page=1" %]">« First</a></li>
-    <li [% IF page == 1 %]class="disabled"[% END %]><a href="[% "$baseUri?page="; (page - 1) %]">‹ Previous</a></li>
-    <li [% IF page * resultsPerPage >= total %]class="disabled"[% END %]><a href="[% "$baseUri?page="; (page + 1) %]">Next ›</a></li>
-    <li [% IF page * resultsPerPage >= total %]class="disabled"[% END %]><a href="[% "$baseUri?page="; (total - 1) div resultsPerPage + 1 %]">Last »</a></li>
+  <ul class="pagination">
+    <li class="page-item[% IF page == 1 %] disabled[% END %]"><a class="page-link" href="[% "$baseUri?page=1" %]">&laquo; First</a></li>
+    <li class="page-item[% IF page == 1 %] disabled[% END %]"><a class="page-link" href="[% "$baseUri?page="; (page - 1) %]">&lsaquo; Previous</a></li>
+    <li class="page-item[% IF page * resultsPerPage >= total %] disabled[% END %]"><a class="page-link" href="[% "$baseUri?page="; (page + 1) %]">Next &rsaquo;</a></li>
+    <li class="page-item[% IF page * resultsPerPage >= total %] disabled[% END %]"><a class="page-link" href="[% "$baseUri?page="; (total - 1) div resultsPerPage + 1 %]">Last &raquo;</a></li>
   </ul>
 [% END;
 
@@ -517,7 +517,7 @@ BLOCK renderLogLinks %]
 
 BLOCK makeLazyTab %]
   <div id="[% tabName %]" class="tab-pane">
-    <center><img src="[% c.uri_for("/static/images/ajax-loader.gif") %]" alt="Loading..." /></center>
+    <center><span class="spinner-border spinner-border-sm"/></center>
   </div>
   <script>
     $(function() { makeLazyTab("[% tabName %]", "[% uri %]"); });
@@ -533,9 +533,19 @@ BLOCK makePopover %]
 
 
 BLOCK menuItem %]
-  <li class="[% IF "${root}${curUri}" == uri %]active[% END %]" [% IF confirmmsg %]onclick="javascript:return confirm('[% confirmmsg %]')"[% END %]>
-    <a [% HTML.attributes(href => uri) %] [%+ IF modal %]data-toggle="modal"[% END %]>
-      [% IF icon %]<i class="[% icon %] icon-black"></i> [%+ END %]
+  <a class="dropdown-item[% IF "${root}${curUri}" == uri %] active[% END %]"
+    [% HTML.attributes(href => uri) %] [%+ IF modal %]data-toggle="modal"[% END %]
+    [% IF confirmmsg %]onclick="javascript:return confirm('[% confirmmsg %]')"[% END %]>
+    [% IF icon %]<i class="[% icon %] icon-black"></i> [%+ END %]
+    [% title %]
+  </a>
+[% END;
+
+
+BLOCK navItem %]
+  <li class="nav-item">
+    <a class="nav-link[% IF "${root}${curUri}" == uri %] active[% END %]"
+      [% HTML.attributes(href => uri) %]>
       [% title %]
     </a>
   </li>
diff --git a/src/root/dashboard.tt b/src/root/dashboard.tt
index 5411652e5..11ae66991 100644
--- a/src/root/dashboard.tt
+++ b/src/root/dashboard.tt
@@ -2,9 +2,9 @@
 [% PROCESS common.tt %]
 
 <ul class="nav nav-tabs">
-  <li class="active"><a href="#tabs-starred-jobs" data-toggle="tab">Starred jobs</a></li>
-  <li><a href="#tabs-my-jobs" data-toggle="tab">My jobs</a></li>
-  <li><a href="#tabs-my-jobsets" data-toggle="tab">My jobsets</a></li>
+  <li class="nav-item"><a class="nav-link active" href="#tabs-starred-jobs" data-toggle="tab">Starred jobs</a></li>
+  <li class="nav-item"><a class="nav-link" href="#tabs-my-jobs" data-toggle="tab">My jobs</a></li>
+  <li class="nav-item"><a class="nav-link" href="#tabs-my-jobsets" data-toggle="tab">My jobsets</a></li>
 </ul>
 
 <div id="generic-tabs" class="tab-content">
diff --git a/src/root/edit-jobset.tt b/src/root/edit-jobset.tt
index 02391651c..2b26558af 100644
--- a/src/root/edit-jobset.tt
+++ b/src/root/edit-jobset.tt
@@ -57,124 +57,132 @@
   </table>
 [% END %]
 
-<form class="form-horizontal">
+<form>
 
-  <fieldset>
+  <div class="form-group row">
+    <label class="col-sm-3" for="editjobsetenabled">State</label>
+    <div class="btn-group btn-group-toggle col-sm-9" data-toggle="buttons">
+      <label class="btn btn-secondary[% IF jobset.enabled == 1 %] active[% END %]">
+        <input type="radio" id="editjobsetenabled" name="enabled" value="1" [% IF jobset.enabled == 1 %]checked[% END %]>Enabled</button>
+      </label>
+      <label class="btn btn-secondary[% IF jobset.enabled == 2 %] active[% END %]">
+        <input type="radio" name="enabled" value="2" [% IF jobset.enabled == 2 %]checked[% END %]>One-shot</button>
+      </label>
+      <label class="btn btn-secondary[% IF jobset.enabled == 3 %] active[% END %]">
+        <input type="radio" name="enabled" value="3" [% IF jobset.enabled == 3 %]checked[% END %]>One-at-a-time</button>
+      </label>
+      <label class="btn btn-secondary[% IF jobset.enabled == 0 %] active[% END %]">
+        <input type="radio" name="enabled" value="0" [% IF jobset.enabled == 0 %]checked[% END %]>Disabled</button>
+      </label>
+    </div>
+  </div>
 
-    <div class="control-group">
-      <label class="control-label">State</label>
-      <div class="controls">
-        <div class="btn-group" data-toggle="buttons-radio">
-          <input type="hidden" name="enabled" value="[% jobset.enabled %]" />
-          <button type="button" class="btn" value="1">Enabled</button>
-          <button type="button" class="btn" value="2">One-shot</button>
-          <button type="button" class="btn" value="3">One-at-a-time</button>
-          <button type="button" class="btn" value="0">Disabled</button>
+  <div class="form-group row">
+    <label class="col-form-label col-sm-3" for="editjobsetvisible">Visible</label>
+    <div class="col-sm-9">
+      <input type="checkbox" id="editjobsetvisible" name="visible" [% IF !jobset.hidden; 'checked="checked"'; END %]/>
+    </div>
+  </div>
+
+  <div class="form-group row">
+    <label class="col-form-label col-sm-3" for="editjobsetname">Identifier</label>
+    <div class="col-sm-9">
+      <input type="text" class="form-control" id="editjobsetname" name="name" [% HTML.attributes(value => edit ? jobset.name : "") %]/>
+    </div>
+  </div>
+
+  <div class="form-group row">
+    <label class="col-sm-3" for="editjobsettype">Type</label>
+    <div class="btn-group btn-group-toggle col-sm-9" data-toggle="buttons">
+      <label class="btn btn-secondary[% IF jobset.type == 1 %] active[% END %]">
+        <input type="radio" id="type-flake" name="enabled" value="1" [% IF jobset.type == 1 %]checked[% END %]>Flake</button>
+      </label>
+      <label class="btn btn-secondary[% IF jobset.type == 0 %] active[% END %]">
+        <input type="radio" id="type-legacy" name="enabled" value="0" [% IF jobset.type == 0 %]checked[% END %]>Legacy</button>
+      </label>
+    </div>
+  </div>
+
+  <div class="form-group row">
+    <label class="col-form-label col-sm-3" for="editjobsetdescription">Description</label>
+    <div class="col-sm-9">
+      <input type="text" class="form-control" id="editjobsetdescription" name="description" [% HTML.attributes(value => jobset.description) %]/>
+    </div>
+  </div>
+
+  <div class="form-group row show-on-flake">
+    <label class="col-form-label col-sm-3" for="editjobsetflakeref">Flake URI</label>
+    <div class="col-sm-9">
+      <div class="input-group">
+        <input type="text" class="form-control" id="editjobsetflakeref" name="flakeref" [% HTML.attributes(value => jobset.flake) %]/>
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group row show-on-legacy">
+    <label class="col-form-label col-sm-3" for="editjobsetnixexpr">Nix expression</label>
+    <div class="col-sm-9">
+      <div class="input-group">
+        <input type="text" class="form-control" id="editjobsetnixexpr" name="nixexprpath" [% HTML.attributes(value => jobset.nixexprpath) %]/>
+        <div class="input-group-append input-group-prepend">
+          <span class="input-group-text">in</span>
+        </div>
+        <input type="text" class="form-control" name="nixexprinput" [% HTML.attributes(value => jobset.nixexprinput) %]/>
+      </div>
+    </div>
+  </div>
+
+  <div class="form-group row">
+    <label class="col-sm-3" for="editjobsetcheckinterval">
+      Check interval
+      <small class="form-text text-muted">(0 to disable polling)</small>
+    </label>
+    <div class="col-sm-9">
+      <div class="input-group">
+        <input type="number" class="form-control" id="editjobsetcheckinterval" name="checkinterval" [% HTML.attributes(value => jobset.checkinterval) %]/>
+        <div class="input-group-append">
+          <span class="input-group-text">sec</span>
         </div>
       </div>
     </div>
+  </div>
 
-    <div class="control-group">
-      <div class="controls">
-        <label class="checkbox">
-          <input type="checkbox" name="visible" [% IF !jobset.hidden; 'checked="checked"'; END %]/>Visible
-        </label>
-      </div>
+  <div class="form-group row">
+    <label class="col-sm-3" for="editjobsetschedulingshares">
+      Scheduling shares
+      [% IF totalShares %]
+        <small class="form-text text-muted">([% f = format("%.2f"); f(jobset.schedulingshares / totalShares * 100) %]% out of [% totalShares %] shares)</small>
+      [% END %]
+    </label>
+    <div class="col-sm-9">
+      <input type="number" class="form-control" id="editjobschedulingshares" name="schedulingshares" [% HTML.attributes(value => jobset.schedulingshares) %]/>
     </div>
+  </div>
 
-    <div class="control-group">
-      <label class="control-label">Identifier</label>
-      <div class="controls">
-        <input type="text" class="span3" name="name" [% HTML.attributes(value => edit ? jobset.name : "") %]/>
-      </div>
+  <div class="form-group row">
+    <label class="col-sm-3" for="editjobsetenableemail">Email notification</label>
+    <div class="col-sm-9">
+      <input type="checkbox" id="editjobsetenableemail" name="enableemail" [% IF jobset.enableemail %]checked[% END %] [% IF !emailNotification %]disabled[% END %]/>
     </div>
+  </div>
 
-    <div class="control-group">
-      <label class="control-label">Description</label>
-      <div class="controls">
-        <input type="text" class="span3" name="description" [% HTML.attributes(value => jobset.description) %]/>
-      </div>
+  <div class="form-group row">
+    <label class="col-sm-3" for="editjobsetemailoverride">Email override</label>
+    <div class="col-sm-9">
+      <input type="text" class="form-control" id="editjobsetemailoverride" name="emailoverride" [% HTML.attributes(value => jobset.emailoverride) %] [% IF !emailNotification %]disabled[% END %]/>
     </div>
+  </div>
 
-    <div class="control-group">
-      <label class="control-label">Type</label>
-      <div class="controls">
-        <div class="btn-group" data-toggle="buttons-radio">
-          <input type="hidden" id="type" name="type" value="[% jobset.type %]" />
-          <button type="button" class="btn" value="1" id="type-flake">Flake</button>
-          <button type="button" class="btn" value="0" id="type-legacy">Legacy</button>
-        </div>
-      </div>
+  <div class="form-group row">
+    <label class="col-sm-3" for="editjobsetkeepnumber">Number of evaluations to keep</label>
+    <div class="col-sm-9">
+      <input type="number" class="form-control" id="editjobsetkeepnumber" name="keepnr" [% HTML.attributes(value => jobset.keepnr) %]/>
     </div>
+  </div>
 
-    <div class="control-group show-on-flake">
-      <label class="control-label">Flake URI</label>
-      <div class="controls">
-        <input type="text" class="span3" name="flakeref" [% HTML.attributes(value => jobset.flake) %]/>
-      </div>
-    </div>
+  [% INCLUDE renderJobsetInputs %]
 
-    <div class="control-group show-on-legacy">
-      <label class="control-label">Nix expression</label>
-      <div class="controls">
-        <input type="text" class="span3" name="nixexprpath" [% HTML.attributes(value => jobset.nixexprpath) %]/>
-        in
-        <input type="text" class="span3" name="nixexprinput" [% HTML.attributes(value => jobset.nixexprinput) %]/>
-      </div>
-    </div>
-
-    <div class="control-group">
-      <label class="control-label">Check interval</label>
-      <div class="controls">
-        <div class="input-append">
-          <input type="number" class="span3" name="checkinterval" [% HTML.attributes(value => jobset.checkinterval) %]/>
-          <span class="add-on">sec</span>
-        </div>
-        <span class="help-inline">(0 to disable polling)</span>
-      </div>
-    </div>
-
-    <div class="control-group">
-      <label class="control-label">Scheduling shares</label>
-      <div class="controls">
-        <div class="input-append">
-          <input type="number" class="span3" name="schedulingshares" [% HTML.attributes(value => jobset.schedulingshares) %]/>
-        </div>
-        [% IF totalShares %]
-          <span class="help-inline">([% f = format("%.2f"); f(jobset.schedulingshares / totalShares * 100) %]% out of [% totalShares %] shares)</span>
-        [% END %]
-      </div>
-    </div>
-
-    <div class="control-group">
-      <div class="controls">
-        <label class="checkbox">
-          <input type="checkbox" name="enableemail" [% IF jobset.enableemail; 'checked="checked"'; END %] [%IF !emailNotification%]disabled=1[%END%] />Email notification
-        </label>
-      </div>
-    </div>
-
-    <div class="control-group">
-      <label class="control-label">Email override</label>
-      <div class="controls">
-        <input type="text" class="span3" name="emailoverride" [% HTML.attributes(value => jobset.emailoverride) %] [%IF !emailNotification%]disabled=1[%END%] />
-      </div>
-    </div>
-
-    <div class="control-group">
-      <label class="control-label">Number of evaluations to keep</label>
-      <div class="controls">
-        <input type="number" class="span3" name="keepnr" [% HTML.attributes(value => jobset.keepnr) %]/>
-      </div>
-    </div>
-
-    [% INCLUDE renderJobsetInputs %]
-
-    <div class="form-actions">
-      <button id="submit-jobset" type="submit" class="btn btn-primary"><i class="icon-ok icon-white"></i> [%IF !edit %]Create jobset[% ELSE %]Apply changes[% END %]</button>
-    </div>
-
-  </fieldset>
+  <button id="submit-jobset" type="submit" class="btn btn-primary"><i class="icon-ok icon-white"></i> [%IF !edit %]Create jobset[% ELSE %]Apply changes[% END %]</button>
 
   <table style="display: none">
     [% INCLUDE renderJobsetInput input="" extraClass="template" id="input-template" baseName="input-template" %]
diff --git a/src/root/edit-project.tt b/src/root/edit-project.tt
index b2d7264a9..4d7f82a4f 100644
--- a/src/root/edit-project.tt
+++ b/src/root/edit-project.tt
@@ -1,85 +1,79 @@
 [% WRAPPER layout.tt title=(create ? "New project" : "Editing project $project.name") %]
 [% PROCESS common.tt %]
 
-<form class="form-horizontal">
+<form>
 
-  <fieldset>
-
-    <div class="control-group">
-      <div class="controls">
-        <label class="checkbox">
-          <input type="checkbox" name="enabled" [% IF create || project.enabled; 'checked="checked"'; END %]/>Enabled
-        </label>
-      </div>
-      <div class="controls">
-        <label class="checkbox">
-          <input type="checkbox" name="visible" [% IF !project.hidden; 'checked="checked"'; END %]/>Visible in the list of projects
-        </label>
-      </div>
+  <div class="form-group row">
+    <label class="col-sm-3" for="editprojectenabled">Enabled</label>
+    <div class="col-sm-9">
+      <input type="checkbox" id="editprojectenabled" name="enabled" [% IF project.enabled %] checked="checked" [% END %]/>
     </div>
+  </div>
 
-    <div class="control-group">
-      <label class="control-label">Identifier</label>
-      <div class="controls">
-        <input type="text" class="span3" name="name" [% HTML.attributes(value => project.name) %]/>
-      </div>
+  <div class="form-group row">
+    <label class="col-sm-3" for="editprojectvisible">Visible in projects list</label>
+    <div class="col-sm-9">
+      <input type="checkbox" id="editprojectvisible" name="visible" [% IF !project.hidden %] checked="checked" [% END %]/>
     </div>
+  </div>
 
-    <div class="control-group">
-      <label class="control-label">Display name</label>
-      <div class="controls">
-        <input type="text" class="span3" name="displayname" [% HTML.attributes(value => project.displayname) %]/>
-      </div>
+  <div class="form-group row">
+    <label class="col-sm-3" for="editprojectidentifier">Identifier</label>
+    <div class="col-sm-9">
+      <input type="text" class="form-control" id="editprojectidentifier" name="name" [% HTML.attributes(value => project.name) %]/>
     </div>
+  </div>
 
-    <div class="control-group">
-      <label class="control-label">Description</label>
-      <div class="controls">
-        <input type="text" class="span3" name="description" [% HTML.attributes(value => project.description) %]/>
-      </div>
+  <div class="form-group row">
+    <label class="col-sm-3" for="editprojectdisplayname">Display name</label>
+    <div class="col-sm-9">
+      <input type="text" class="form-control" id="editprojectdisplayname" name="displayname" [% HTML.attributes(value => project.displayname) %]/>
     </div>
+  </div>
 
-    <div class="control-group">
-      <label class="control-label">Homepage</label>
-      <div class="controls">
-        <input type="text" class="span3" name="homepage" [% HTML.attributes(value => project.homepage) %]/>
-      </div>
+  <div class="form-group row">
+    <label class="col-sm-3" for="editprojectdescription">Description</label>
+    <div class="col-sm-9">
+      <input type="text" class="form-control" id="editprojectdescription" name="description" [% HTML.attributes(value => project.description) %]/>
     </div>
+  </div>
 
-    <div class="control-group">
-      <label class="control-label">Owner</label>
-      <div class="controls">
-        <input type="text" class="span3" name="owner" [% HTML.attributes(value => project.owner.username || c.user.username) %]/>
-      </div>
+  <div class="form-group row">
+    <label class="col-sm-3" for="editprojecthomepage">Homepage</label>
+    <div class="col-sm-9">
+      <input type="text" class="form-control" id="editprojecthomepage" name="homepage" [% HTML.attributes(value => project.homepage) %]/>
     </div>
+  </div>
 
-    <div class="control-group">
-      <label class="control-label">Declarative spec file</label>
-      <div class="controls">
-        <div class="input-append">
-          <input type="text" class="span3" name="declfile" [% HTML.attributes(value => project.declfile) %]/>
-        </div>
-        <span class="help-inline">(Leave blank for non-declarative project configuration)</span>
-      </div>
+  <div class="form-group row">
+    <label class="col-sm-3" for="editprojectowner">Owner</label>
+    <div class="col-sm-9">
+      <input type="text" class="form-control" id="editprojectowner" name="owner" [% HTML.attributes(value => project.owner.username || c.user.username) %]/>
     </div>
+  </div>
 
-    <div class="control-group">
-      <label class="control-label">Declarative input type</label>
-      <div class="controls">
-        [% INCLUDE renderSelection param="decltype" options=inputTypes edit=1 curValue=project.decltype %]
-        value
-        <input style="width: 70%" type="text" [% HTML.attributes(value => project.declvalue, name => "declvalue") %]/>
-      </div>
+  <div class="form-group row">
+    <label class="col-sm-3" for="editprojectdeclfile">
+      Declarative spec file
+      <small class="form-text text-muted">(Leave blank for non-declarative project configuration)</small>
+      </label>
+    <div class="col-sm-9">
+      <input type="text" class="form-control" id="editprojectdeclfile" name="declfile" [% HTML.attributes(value => project.declfile) %]/>
     </div>
+  </div>
 
-    <div class="form-actions">
-      <button id="submit-project" type="submit" class="btn btn-primary">
-        <i class="icon-ok icon-white"></i>
-        [%IF create %]Create project[% ELSE %]Apply changes[% END %]
-      </button>
+  <div class="form-group row">
+    <label class="col-sm-3" for="editprojectdeclvalue">Declarative input type</label>
+    <div class="col-sm-9">
+      [% INCLUDE renderSelection param="decltype" options=inputTypes edit=1 curValue=project.decltype %]
+      <input type="text" class="form-control" id="editprojectdeclvalue" name="declvalue" [% HTML.attributes(value => project.declvalue) %]/>
     </div>
+  </div>
 
-  </fieldset>
+  <button id="submit-project" type="submit" class="btn btn-primary">
+    <i class="icon-ok icon-white"></i>
+    [%IF create %]Create project[% ELSE %]Apply changes[% END %]
+  </button>
 
 </form>
 
diff --git a/src/root/job.tt b/src/root/job.tt
index 0d398264e..6c8e82fd3 100644
--- a/src/root/job.tt
+++ b/src/root/job.tt
@@ -15,12 +15,12 @@ removed or had an evaluation error.</div>
 [% END %]
 
 <ul class="nav nav-tabs">
-  <li class="active"><a href="#tabs-status" data-toggle="tab">Status</a></li>
+  <li class="nav-item active"><a class="nav-link" href="#tabs-status" data-toggle="tab">Status</a></li>
   [% IF constituentJobs.size > 0 %]
-    <li><a href="#tabs-constituents" data-toggle="tab">Constituents</a></li>
+    <li class="nav-item"><a class="nav-link" href="#tabs-constituents" data-toggle="tab">Constituents</a></li>
   [% END %]
-  <li><a href="#tabs-charts" data-toggle="tab">Charts</a></li>
-  <li><a href="#tabs-links" data-toggle="tab">Links</a></li>
+  <li class="nav-item"><a class="nav-link" href="#tabs-charts" data-toggle="tab">Charts</a></li>
+  <li class="nav-item"><a class="nav-link" href="#tabs-links" data-toggle="tab">Links</a></li>
 </ul>
 
 <div id="generic-tabs" class="tab-content">
diff --git a/src/root/jobset-eval.tt b/src/root/jobset-eval.tt
index fb3c31903..b43bf4106 100644
--- a/src/root/jobset-eval.tt
+++ b/src/root/jobset-eval.tt
@@ -32,67 +32,63 @@ c.uri_for(c.controller('JobsetEval').action_for('view'),
 <div class="alert">Couldn't find an evaluation to compare to.</div>
 [% END %]
 
-<form class="form-search">
-  <input name="filter" type="text" class="input-large search-query" placeholder="Search jobs by name..." [% HTML.attributes(value => filter) %]/>
+<form>
+  <input name="filter" type="text" class="form-control" type="search" placeholder="Search jobs by name..." [% HTML.attributes(value => filter) %]/>
   <input name="compare" type="hidden" [% HTML.attributes(value => otherEval.id) %]/>
   <input name="full" type="hidden" [% HTML.attributes(value => full) %]/>
 </form>
 
 <ul class="nav nav-tabs">
   [% IF c.user_exists %]
-    <li class="dropdown">
-      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-        Actions
-        <b class="caret"></b>
-      </a>
-      <ul class="dropdown-menu">
-        <li><a href="[% c.uri_for(c.controller('JobsetEval').action_for('create_jobset'), [eval.id]) %]">Create a jobset from this evaluation</a></li>
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Actions</a>
+      <div class="dropdown-menu">
+        <a class="dropdown-item" href="[% c.uri_for(c.controller('JobsetEval').action_for('create_jobset'), [eval.id]) %]">Create a jobset from this evaluation</a>
         [% IF unfinished.size > 0 %]
-          <li><a href="[% c.uri_for(c.controller('JobsetEval').action_for('cancel'), [eval.id]) %]">Cancel all scheduled builds</a></li>
+          <a class="dropdown-item" href="[% c.uri_for(c.controller('JobsetEval').action_for('cancel'), [eval.id]) %]">Cancel all scheduled builds</a>
         [% END %]
         [% IF aborted.size > 0 || stillFail.size > 0 || nowFail.size > 0 %]
-          <li><a href="[% c.uri_for(c.controller('JobsetEval').action_for('restart_failed'), [eval.id]) %]">Restart all failed builds</a></li>
+          <a class="dropdown-item" href="[% c.uri_for(c.controller('JobsetEval').action_for('restart_failed'), [eval.id]) %]">Restart all failed builds</a>
         [% END %]
         [% IF aborted.size > 0 %]
-          <li><a href="[% c.uri_for(c.controller('JobsetEval').action_for('restart_aborted'), [eval.id]) %]">Restart all aborted builds</a></li>
+          <a class="dropdown-item" href="[% c.uri_for(c.controller('JobsetEval').action_for('restart_aborted'), [eval.id]) %]">Restart all aborted builds</a>
         [% END %]
         [% IF unfinished.size > 0 %]
-          <li><a href="[% c.uri_for(c.controller('JobsetEval').action_for('bump'), [eval.id]) %]">Bump builds to front of queue</a></li>
+          <a class="dropdown-item" href="[% c.uri_for(c.controller('JobsetEval').action_for('bump'), [eval.id]) %]">Bump builds to front of queue</a>
         [% END %]
-      </ul>
+      </div>
     </li>
   [% END %]
 
   [% IF aborted.size > 0 %]
-    <li><a href="#tabs-aborted" data-toggle="tab"><span class="text-warning">Aborted jobs ([% aborted.size %])</span></a></li>
+    <li class="nav-item"><a class="nav-link" href="#tabs-aborted" data-toggle="tab"><span class="text-warning">Aborted jobs ([% aborted.size %])</span></a></li>
   [% END %]
   [% IF nowFail.size > 0 %]
-    <li><a href="#tabs-now-fail" data-toggle="tab"><span class="text-warning">Newly failing jobs ([% nowFail.size %])</span></a></li>
+    <li class="nav-item"><a class="nav-link" href="#tabs-now-fail" data-toggle="tab"><span class="text-warning">Newly failing jobs ([% nowFail.size %])</span></a></li>
   [% END %]
   [% IF nowSucceed.size > 0 %]
-    <li><a href="#tabs-now-succeed" data-toggle="tab"><span class="text-success">Newly succeeding jobs ([% nowSucceed.size %])</span></a></li>
+    <li class="nav-item"><a class="nav-link" href="#tabs-now-succeed" data-toggle="tab"><span class="text-success">Newly succeeding jobs ([% nowSucceed.size %])</span></a></li>
   [% END %]
   [% IF new.size > 0 %]
-    <li><a href="#tabs-new" data-toggle="tab">New jobs ([% new.size %])</a></li>
+    <li class="nav-item"><a class="nav-link" href="#tabs-new" data-toggle="tab">New jobs ([% new.size %])</a></li>
   [% END %]
   [% IF removed.size > 0 %]
-    <li><a href="#tabs-removed" data-toggle="tab">Removed jobs ([% removed.size %])</a></li>
+    <li class="nav-item"><a class="nav-link" href="#tabs-removed" data-toggle="tab">Removed jobs ([% removed.size %])</a></li>
   [% END %]
   [% IF stillFail.size > 0 %]
-    <li><a href="#tabs-still-fail" data-toggle="tab">Still failing jobs ([% stillFail.size %])</a></li>
+    <li class="nav-item"><a class="nav-link" href="#tabs-still-fail" data-toggle="tab">Still failing jobs ([% stillFail.size %])</a></li>
   [% END %]
   [% IF stillSucceed.size > 0 %]
-    <li><a href="#tabs-still-succeed" data-toggle="tab">Still succeeding jobs ([% stillSucceed.size %])</a></li>
+    <li class="nav-item"><a class="nav-link" href="#tabs-still-succeed" data-toggle="tab">Still succeeding jobs ([% stillSucceed.size %])</a></li>
   [% END %]
   [% IF unfinished.size > 0 %]
-    <li><a href="#tabs-unfinished" data-toggle="tab">Queued jobs ([% unfinished.size %])</a></li>
+    <li class="nav-item"><a class="nav-link" href="#tabs-unfinished" data-toggle="tab">Queued jobs ([% unfinished.size %])</a></li>
   [% END %]
-  <li><a href="#tabs-inputs" data-toggle="tab">Inputs</a></li>
+  <li class="nav-item"><a class="nav-link" href="#tabs-inputs" data-toggle="tab">Inputs</a></li>
 
   [% IF eval.evaluationerror.errormsg %]
-    <li><a href="#tabs-errors" data-toggle="tab"><span class="text-warning">Evaluation errors</span></a></li>
+    <li class="nav-item"><a class="nav-link" href="#tabs-errors" data-toggle="tab"><span class="text-warning">Evaluation errors</span></a></li>
   [% END %]
-
 </ul>
 
 [% BLOCK renderSome %]
diff --git a/src/root/jobset-jobs-tab.tt b/src/root/jobset-jobs-tab.tt
index 1a9dac17a..8acc5ca2f 100644
--- a/src/root/jobset-jobs-tab.tt
+++ b/src/root/jobset-jobs-tab.tt
@@ -1,12 +1,15 @@
 [% PROCESS common.tt; USE Math %]
 
-<form class="form-search" id="filter-jobs">
-  <div class="input-append">
-    <input name="filter" type="text" class="input-large search-query" placeholder="Search jobs by name..." [% HTML.attributes(value => filter) %]/>
-    <button type="button" class="btn btn-info [% IF showInactive %]active[% END %]" id="active-toggle">Show inactive jobs</button>
+<form id="filter-jobs">
+  <div class="input-group">
+    <input name="filter" type="search" class="form-control" placeholder="Search jobs by name..." [% HTML.attributes(value => filter) %]/>
+    <div class="input-group-prepend">
+      <button type="button" class="btn btn-info [% IF showInactive %]active[% END %]" id="active-toggle">
+        <span class="spinner-border spinner-border-sm" id="filter-loading" style="display:none"/>
+        Show inactive jobs
+      </button>
+    </div>
   </div>
-  &nbsp;
-  <img src="[% c.uri_for("/static/images/ajax-loader.gif") %]" alt="Loading..." style="display: none;" id="filter-loading" />
 </form>
 
 <script>
diff --git a/src/root/jobset.tt b/src/root/jobset.tt
index b775ddbd0..b26186bb1 100644
--- a/src/root/jobset.tt
+++ b/src/root/jobset.tt
@@ -43,12 +43,9 @@
 
 <ul class="nav nav-tabs">
   [% IF c.user_exists %]
-    <li class="dropdown">
-      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-        Actions
-        <b class="caret"></b>
-      </a>
-      <ul class="dropdown-menu">
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Actions</a>
+      <div class="dropdown-menu">
         [% UNLESS project.declfile %]
         [% INCLUDE menuItem title="Edit configuration" icon="icon-edit" uri=c.uri_for(c.controller('Jobset').action_for('edit'), c.req.captures) %]
         <!--
@@ -57,18 +54,18 @@
         [% INCLUDE menuItem title="Clone this jobset" uri=c.uri_for(c.controller('Jobset').action_for('edit'), c.req.captures, { cloneJobset => 1 }) %]
         [% END %]
         [% INCLUDE menuItem title="Evaluate this jobset" uri="javascript:confirmEvaluateJobset()" %]
-      </ul>
+      </div>
     </li>
   [% END %]
 
-  <li class="active"><a href="#tabs-evaluations" data-toggle="tab">Evaluations</a></li>
+  <li class="nav-item active"><a class="nav-link" href="#tabs-evaluations" data-toggle="tab">Evaluations</a></li>
   [% IF jobset.errormsg || jobset.fetcherrormsg %]
-    <li><a href="#tabs-errors" data-toggle="tab"><span class="text-warning">Evaluation errors</span></a></li>
+    <li class="nav-item"><a class="nav-link" href="#tabs-errors" data-toggle="tab"><span class="text-warning">Evaluation errors</span></a></li>
   [% END %]
-  <li><a href="#tabs-jobs" data-toggle="tab">Jobs</a></li>
-  <li><a href="#tabs-configuration" data-toggle="tab">Configuration</a></li>
-  <li><a href="#tabs-links" data-toggle="tab">Links</a></li>
-  <li><a href="#tabs-channels" data-toggle="tab">Channels</a></li>
+  <li class="nav-item"><a class="nav-link" href="#tabs-jobs" data-toggle="tab">Jobs</a></li>
+  <li class="nav-item"><a class="nav-link" href="#tabs-configuration" data-toggle="tab">Configuration</a></li>
+  <li class="nav-item"><a class="nav-link" href="#tabs-links" data-toggle="tab">Links</a></li>
+  <li class="nav-item"><a class="nav-link" href="#tabs-channels" data-toggle="tab">Channels</a></li>
 </ul>
 
 <div id="generic-tabs" class="tab-content">
diff --git a/src/root/layout.tt b/src/root/layout.tt
index 0d62d6e5d..4077b8dc2 100644
--- a/src/root/layout.tt
+++ b/src/root/layout.tt
@@ -20,11 +20,9 @@
     <script type="text/javascript" src="[% c.uri_for("/static/bootstrap/js/bootstrap.min.js") %]"></script>
     <link href="[% c.uri_for("/static/bootstrap/css/bootstrap.min.css") %]" rel="stylesheet" />
 
-    <!-- hydra.css must be included before bootstrap-responsive to
-         make the @media rule work. -->
+    <!-- hydra.css may need to be moved to before boostrap to make the @media rule work. -->
     <link rel="stylesheet" href="[% c.uri_for("/static/css/hydra.css") %]" type="text/css" />
     <link rel="stylesheet" href="[% c.uri_for("/static/css/rotated-th.css") %]" type="text/css" />
-    <link href="[% c.uri_for("/static/bootstrap/css/bootstrap-responsive.min.css") %]" rel="stylesheet" />
 
     <style>
       .popover { max-width: 40%; }
@@ -46,27 +44,21 @@
 
   <body>
 
-    <div class="navbar navbar-fixed-top">
-      <div class="navbar-inner">
-        <div class="container">
-          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-          <a class="brand" href="[% c.uri_for(c.controller('Root').action_for('index')) %]">
-            [% IF logo == "" %]
-              Hydra
-            [% ELSE %]
-              <img src="[% c.uri_for(logo) %]" alt="Hydra Logo" class="logo" />
-            [% END %]
-          </a>
-          <div class="nav-collapse collapse">
-            [% PROCESS topbar.tt %]
-          </div>
-        </div>
+    <nav class="navbar navbar-expand-md navbar-light bg-light">
+      <a class="navbar-brand" href="[% c.uri_for(c.controller('Root').action_for('index')) %]">
+        [% IF logo == "" %]
+          Hydra
+        [% ELSE %]
+          <img src="[% c.uri_for(logo) %]" alt="Hydra Logo" class="logo" />
+        [% END %]
+      </a>
+      <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarSupportedContent">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        [% PROCESS topbar.tt %]
       </div>
-    </div>
+    </nav>
 
     <div class="container">
       <div class="skip-topbar"></div>
diff --git a/src/root/news.tt b/src/root/news.tt
index 7f4892636..bb837bdff 100644
--- a/src/root/news.tt
+++ b/src/root/news.tt
@@ -21,22 +21,18 @@
     </table>
 [% END %]
 
-<form class="form-horizontal" action="[% c.uri_for('/admin/news/submit') %]" method="post">
-  <fieldset>
-    <legend>Add news item</legend>
-    <div class="control-group">
-      <label class="control-label">News text (HTML)</label>
-      <div class="controls">
-        <textarea class="span9" name="contents"></textarea>
-      </div>
-    </div>
-  </fieldset>
-  <div class="form-actions">
-    <button type="submit" class="btn btn-primary">
-      <i class="icon-ok icon-white"></i>
-      Post
-    </button>
+<form action="[% c.uri_for('/admin/news/submit') %]" method="post">
+  <div class="page-header">Add news item</div>
+
+  <div class="form-group">
+    <label for="newscontents">News text (HTML)</label>
+    <textarea class="form-control" id="newscontents" name="contents"></textarea>
   </div>
+
+  <button type="submit" class="btn btn-primary">
+    <i class="icon-ok icon-white"></i>
+    Post
+  </button>
 </form>
 
 [% END %]
diff --git a/src/root/project.tt b/src/root/project.tt
index 1dd2b94b6..ee0af1860 100644
--- a/src/root/project.tt
+++ b/src/root/project.tt
@@ -3,23 +3,20 @@
 
 <ul class="nav nav-tabs">
   [% IF c.user_exists %]
-    <li class="dropdown">
-      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-        Actions
-        <b class="caret"></b>
-      </a>
-      <ul class="dropdown-menu">
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Actions</a>
+      <div class="dropdown-menu">
         [% INCLUDE menuItem title="Edit configuration" icon="icon-edit" uri=c.uri_for(c.controller('Project').action_for('edit'), c.req.captures) %]
         [% INCLUDE menuItem title="Delete this project" icon="icon-trash" uri="javascript:deleteProject()" %]
         [% UNLESS project.declfile %]
-        [% INCLUDE menuItem title="Create jobset" icon="icon-plus" uri=c.uri_for(c.controller('Project').action_for('create_jobset'), c.req.captures) %]
+          [% INCLUDE menuItem title="Create jobset" icon="icon-plus" uri=c.uri_for(c.controller('Project').action_for('create_jobset'), c.req.captures) %]
         [% END %]
-      </ul>
+      </div>
     </li>
   [% END %]
 
-  <li class="active"><a href="#tabs-project" data-toggle="tab">Jobsets</a></li>
-  <li><a href="#tabs-configuration" data-toggle="tab">Configuration</a></li>
+  <li class="nav-item active"><a class="nav-link" href="#tabs-project" data-toggle="tab">Jobsets</a></li>
+  <li class="nav-item"><a class="nav-link" href="#tabs-configuration" data-toggle="tab">Configuration</a></li>
 </ul>
 
 <div class="tab-content">
@@ -50,12 +47,17 @@
 
   <div id="tabs-project" class="tab-pane active">
     [% IF project.jobsets %]
-      <p>This project has the following jobsets:
-      <label id="show-disabled" class="btn btn-small pull-right" data-toggle="button">Show disabled jobsets</label>
-      [% IF isProjectOwner %]
-        <label id="show-hidden" class="btn btn-small pull-right" data-toggle="button">Show hidden jobsets</label>
-      [% END %]
-      </p>
+      <div class="row">
+        <div class="col">
+          This project has the following jobsets:
+        </div>
+        <div class="col-auto">
+          <label id="show-disabled" class="btn btn-secondary" data-toggle="button">Show disabled jobsets</label>
+          [% IF isProjectOwner %]
+            <label id="show-hidden" class="btn btn-secondary" data-toggle="button">Show hidden jobsets</label>
+          [% END %]
+        </div>
+      </div>
       [% INCLUDE renderJobsetOverview %]
     [% ELSE %]
       <p>No jobsets have been defined yet.</p>
diff --git a/src/root/static/css/hydra.css b/src/root/static/css/hydra.css
index 7e462f0b6..fdfa7a8a8 100644
--- a/src/root/static/css/hydra.css
+++ b/src/root/static/css/hydra.css
@@ -52,11 +52,6 @@ table.info-table th {
     padding-bottom: 0.2em;
 }
 
-/* Missing in bootstrap 2.0.2 */
-.text-warning {
-    color: #c09853;
-}
-
 table.clickable-rows > tbody > tr {
     cursor: pointer;
 }
diff --git a/src/root/static/images/ajax-loader.gif b/src/root/static/images/ajax-loader.gif
deleted file mode 100644
index 3288d1035..000000000
Binary files a/src/root/static/images/ajax-loader.gif and /dev/null differ
diff --git a/src/root/static/js/common.js b/src/root/static/js/common.js
index e9c5e5764..debda1130 100644
--- a/src/root/static/js/common.js
+++ b/src/root/static/js/common.js
@@ -46,7 +46,7 @@ $(document).ready(function() {
           window.location = link.attr("href");
     });
 
-    bootbox.animate(false);
+    bootbox.setDefaults({ animate: false });
 
     $(".hydra-popover").popover({});
 
@@ -131,7 +131,7 @@ $(document).ready(function() {
 var tabsLoaded = {};
 
 function makeLazyTab(tabName, uri) {
-    $('.nav-tabs').bind('show', function(e) {
+    $('.nav-tabs').bind('show.bs.tab', function(e) {
         var pattern = /#.+/gi;
         var id = e.target.toString().match(pattern)[0];
         if (id == '#' + tabName && !tabsLoaded[id]) {
diff --git a/src/root/topbar.tt b/src/root/topbar.tt
index f83669171..fdfbf431c 100644
--- a/src/root/topbar.tt
+++ b/src/root/topbar.tt
@@ -1,18 +1,18 @@
 [% BLOCK makeSubMenu %]
-  <li class="dropdown" [% IF id; HTML.attributes(id => id); END %] >
-    <a class="dropdown-toggle" href="#" data-toggle="dropdown">[% title %]<b class="caret"></b></a>
-    <ul class="dropdown-menu">
+  <li class="nav-item dropdown" [% IF id; HTML.attributes(id => id); END %] >
+    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">[% title %]<b class="caret"></b></a>
+    <div class="dropdown-menu[% IF align == 'right' %] dropdown-menu-right[% END %]">
       [% content %]
-    </ul>
+    </div>
   </li>
 [% END %]
 [% showPrivate = (isPrivateHydra && c.user_exists) || ! isPrivateHydra %]
 
 [% IF showPrivate %]
-<ul class="nav pull-left">
+<ul class="navbar-nav mr-auto">
 
   [% IF c.user_exists %]
-    [% INCLUDE menuItem uri = c.uri_for(c.controller('User').action_for('dashboard'), [c.user.username]) title = "Dashboard" %]
+    [% INCLUDE navItem uri = c.uri_for(c.controller('User').action_for('dashboard'), [c.user.username]) title = "Dashboard" %]
   [% END %]
 
   [% WRAPPER makeSubMenu title="Status" %]
@@ -38,8 +38,8 @@
 
   [% IF project %]
     [% WRAPPER makeSubMenu title="Project"  %]
-      <li class="nav-header">[% HTML.escape(project.name) %]</li>
-      <li class="divider"></li>
+      <h6 class="dropdown-header">[% HTML.escape(project.name) %]</h6>
+      <div class="dropdown-divider"></div>
       [% INCLUDE menuItem uri = c.uri_for(c.controller('Project').action_for('project'), [project.name]) title = "Overview" %]
       [% INCLUDE menuItem uri = c.uri_for(c.controller('Project').action_for('all'), [project.name]) title = "Latest builds" %]
       [% INCLUDE menuItem uri = c.uri_for('/project' project.name 'channel' 'latest') title = "Channel" %]
@@ -48,8 +48,8 @@
 
   [% IF jobset %]
     [% WRAPPER makeSubMenu title="Jobset" %]
-      <li class="nav-header">[% HTML.escape(jobset.name) %]</li>
-      <li class="divider"></li>
+      <h6 class="dropdown-header">[% HTML.escape(jobset.name) %]</h6>
+      <div class="dropdown-divider"></div>
       [% INCLUDE menuItem
         uri = c.uri_for(c.controller('Jobset').action_for('jobset'), [project.name, jobset.name])
         title = "Overview" %]
@@ -65,8 +65,8 @@
 
   [% IF job %]
     [% WRAPPER makeSubMenu title="Job" %]
-      <li class="nav-header">[% HTML.escape(job) %]</li>
-      <li class="divider"></li>
+      <h6 class="dropdown-header">[% HTML.escape(job) %]</h6>
+      <div class="dropdown-divider"></div>
       [% INCLUDE menuItem
         uri = c.uri_for(c.controller('Job').action_for('overview'), [project.name, jobset.name, job])
         title = "Overview" %]
@@ -82,7 +82,7 @@
     [% WRAPPER makeSubMenu title="Admin" %]
       [% IF c.check_user_roles('admin') || c.check_user_roles('create-projects') %]
         [% INCLUDE menuItem uri = c.uri_for(c.controller('Project').action_for('create')) title = "Create project" %]
-        <li class="divider"></li>
+        <div class="dropdown-divider"></div>
       [% END %]
       [% IF c.check_user_roles('admin') %]
       [% INCLUDE menuItem
@@ -94,7 +94,7 @@
       [% INCLUDE menuItem
         uri = c.uri_for(c.controller('Admin').action_for('users'))
         title = "Manage users" %]
-      <li class="divider"></li>
+      <div class="dropdown-divider"></div>
       [% INCLUDE menuItem
         uri = c.uri_for(c.controller('Admin').action_for('clear_queue_non_current'))
         title = "Cancel queued non-current builds"
@@ -117,32 +117,31 @@
 </ul>
 [% END %]
 
-<ul class="nav pull-right">
+[% IF showPrivate %]
+  <form class="form-inline" action="[% c.uri_for('/search') %]">
+    <input name="query" type="text" class="form-control" placeholder="Search" [% HTML.attributes(value => c.req.params.query) %]/>
+  </form>
+[% END %]
+
+<ul class="navbar-nav">
 
-  [% IF showPrivate %]
-    <form class="navbar-search" action="[% c.uri_for('/search') %]">
-      <input name="query" type="text" class="search-query span2" placeholder="Search" [% HTML.attributes(value => c.req.params.query) %]/>
-    </form>
-  [% END %]
   [% IF c.user_exists %]
-    [% INCLUDE menuItem uri = c.uri_for(c.controller('User').action_for('edit'), [c.user.username]) title = "Preferences" %]
-    <li>
-      <a href="#" onclick="signOut();">Sign out</a>
+    [% INCLUDE navItem uri = c.uri_for(c.controller('User').action_for('edit'), [c.user.username]) title = "Preferences" %]
+    <li class="nav-item">
+      <a class="nav-link" href="#" onclick="signOut();">Sign out</a>
     </li>
   [% ELSE %]
-    [% WRAPPER makeSubMenu title="Sign in" id="sign-in-menu" %]
+    [% WRAPPER makeSubMenu title="Sign in" id="sign-in-menu" align="right" %]
       [% IF c.config.enable_google_login %]
-        <div style="display: none" class="g-signin2" data-onsuccess="onGoogleSignIn" data-theme="dark"></div></a>
-        <li><a href="#" id="google-signin">Sign in with Google</a></li>
-        <li class="divider"></li>
+        <div style="display: none" class="g-signin2" data-onsuccess="onGoogleSignIn" data-theme="dark"></div>
+        <a class="dropdown-item" href="#" id="google-signin">Sign in with Google</a>
+        <div class="dropdown-divider"></div>
       [% END %]
       [% IF c.config.github_client_id %]
-        <li><a href="/github-redirect?after=[% c.req.path %]">Sign in with GitHub</a></li>
-        <li class="divider"></li>
+        <a class="dropdown-item" href="/github-redirect?after=[% c.req.path %]">Sign in with GitHub</a>
+        <div class="dropdown-divider"></div>
       [% END %]
-      <li>
-        <a href="#hydra-signin" data-toggle="modal">Sign in with a Hydra account</a>
-      </li>
+      <a class="dropdown-item" href="#hydra-signin" data-toggle="modal">Sign in with a Hydra account</a>
     [% END %]
   [% END %]
 
diff --git a/src/root/user.tt b/src/root/user.tt
index d489d338d..e1515b53a 100644
--- a/src/root/user.tt
+++ b/src/root/user.tt
@@ -14,115 +14,107 @@
     >[% role %]</option>
 [% END %]
 
-<form class="form-horizontal">
+<form>
 
-  <fieldset>
+  [% IF create %]
+  <div class="form-group row">
+    <label class="col-sm-3" for="userusername">User name</label>
+    <div class="col-sm-9">
+      <input type="text" class="form-control" id="userusername" name="username" [% HTML.attributes(value => username) %]/>
+    </div>
+  </div>
+  [% END %]
 
-    [% IF create %]
-    <div class="control-group">
-      <label class="control-label">User name</label>
-      <div class="controls">
-        <input type="text" class="span3" name="username" [% HTML.attributes(value => username) %]/>
+  <div class="form-group row">
+    <label class="col-sm-3" for="userfullname">Full name</label>
+    <div class="col-sm-9">
+      <input type="text" class="form-control" id="userfullname" name="fullname" [% HTML.attributes(value => create ? '' : user.fullname) %]/>
+    </div>
+  </div>
+
+  [% IF create || user.type == 'hydra' %]
+  <div class="form-group row">
+    <label class="col-sm-3" for="userpassword">Password</label>
+    <div class="col-sm-9">
+      <input type="password" class="form-control" id="userpassword" name="password" value=""/>
+    </div>
+  </div>
+
+  <div class="form-group row">
+    <label class="col-sm-3" for="userpassword2">Confirm password</label>
+    <div class="col-sm-9">
+      <input type="password" class="form-control" id="userpassword2" name="password2" value=""/>
+    </div>
+  </div>
+  [% END %]
+
+  <div class="form-group row">
+    <label class="col-sm-3" for="useremailaddress">Email</label>
+    <div class="col-sm-9">
+      <input type="text" class="form-control" id="useremailaddress" name="emailaddress" [% IF !create && user.username.search('@') %]disabled="disabled"[% END %] [%+ HTML.attributes(value => user.emailaddress) %]/>
+    </div>
+  </div>
+
+  <div class="form-group row">
+    <label class="col-sm-3" for="useremailonerror">Receive evaluation error notifications</label>
+    <div class="col-sm-9">
+      <input type="checkbox" name="emailonerror" [% IF !create && user.emailonerror; 'checked="checked"'; END %]/>
+    </div>
+  </div>
+
+  <div class="form-group row">
+    <label class="col-sm-3" for="userpublicdashboard">Public dashboard</label>
+    <div class="col-sm-9">
+      <input type="checkbox" name="publicdashboard" [% IF !create && user.publicdashboard; 'checked="checked"'; END %]/>
+    </div>
+  </div>
+
+  [% IF !create || c.check_user_roles('admin') %]
+    <div class="form-group row">
+      <label class="col-sm-3">Roles</label>
+      <div class="col-sm-9">
+        <select multiple="multiple" name="roles" class="form-control" [% IF !c.check_user_roles('admin') %]disabled="disabled"[% END %]>
+          [% INCLUDE roleoption role="admin" %]
+          [% INCLUDE roleoption role="create-projects" %]
+          [% INCLUDE roleoption role="restart-jobs" %]
+          [% INCLUDE roleoption role="bump-to-front" %]
+          [% INCLUDE roleoption role="cancel-build" %]
+        </select>
       </div>
     </div>
-    [% END %]
+  [% END %]
 
-    <div class="control-group">
-      <label class="control-label">Full name</label>
-      <div class="controls">
-        <input type="text" class="span3" name="fullname" [% HTML.attributes(value => create ? '' : user.fullname) %]/>
+  [% IF create && !c.check_user_roles('admin') %]
+    <div class="form-group row">
+      <label class="col-sm-3"></label>
+      <div class="col-sm-9">
+        <img src="[% c.uri_for('/captcha') %]" alt="CAPTCHA">
       </div>
     </div>
-
-    [% IF create || user.type == 'hydra' %]
-    <div class="control-group">
-      <label class="control-label">Password</label>
-      <div class="controls">
-        <input type="password" class="span3" name="password" value=""/>
+    <div class="form-group row">
+      <label class="col-sm-3" for="usercaptcha">Type the digits shown in the image above</label>
+      <div class="col-sm-9">
+        <input type="text" class="form-control" id="usercaptcha" name="captcha" value="">
       </div>
     </div>
+  [% END %]
 
-    <div class="control-group">
-      <label class="control-label">Confirm password</label>
-      <div class="controls">
-        <input type="password" class="span3" name="password2" value=""/>
-      </div>
-    </div>
-    [% END %]
-
-    <div class="control-group">
-      <label class="control-label">Email</label>
-      <div class="controls">
-        <input type="text" class="span3" name="emailaddress" [% IF !create && user.username.search('@') %]disabled="disabled"[% END %] [%+ HTML.attributes(value => user.emailaddress) %]/>
-      </div>
-    </div>
-
-    <div class="control-group">
-      <div class="controls">
-        <label class="checkbox">
-          <input type="checkbox" name="emailonerror" [% IF !create && user.emailonerror; 'checked="checked"'; END %]/>Receive evaluation error notifications
-        </label>
-      </div>
-    </div>
-
-    <div class="control-group">
-      <div class="controls">
-        <label class="checkbox">
-          <input type="checkbox" name="publicdashboard" [% IF !create && user.publicdashboard; 'checked="checked"'; END %]/>Public dashboard
-        </label>
-      </div>
-    </div>
-
-    [% IF !create || c.check_user_roles('admin') %]
-      <div class="control-group">
-        <label class="control-label">Roles</label>
-        <div class="controls">
-          <select multiple="multiple" name="roles" class="span3" [% IF !c.check_user_roles('admin') %]disabled="disabled"[% END %]>
-            [% INCLUDE roleoption role="admin" %]
-            [% INCLUDE roleoption role="create-projects" %]
-            [% INCLUDE roleoption role="restart-jobs" %]
-            [% INCLUDE roleoption role="bump-to-front" %]
-            [% INCLUDE roleoption role="cancel-build" %]
-          </select>
-        </div>
-      </div>
-    [% END %]
-
-    [% IF create && !c.check_user_roles('admin') %]
-      <div class="control-group">
-        <div class="controls">
-          <img src="[% c.uri_for('/captcha') %]" alt="CAPTCHA"/>
-        </div>
-      </div>
-
-      <div class="control-group">
-        <label class="control-label">Type the digits shown in the image above</label>
-        <div class="controls">
-          <input type="text" class="span3" name="captcha" value=""/>
-        </div>
-      </div>
-    [% END %]
-
-    <div class="form-actions">
-      <button id="submit-user" class="btn btn-primary">
-        <i class="icon-ok icon-white"></i>
-        [%IF create %]Create[% ELSE %]Apply changes[% END %]
-      </button>
-      [% IF !create && c.check_user_roles('admin') && user.type == 'hydra' %]
-        <button id="reset-password" class="btn btn-warning">
-          <i class="icon-trash icon-white"></i>
-          Reset password
-        </button>
-      [% END %]
-      [% IF !create %]
-        <button id="delete-user" class="btn btn-danger">
-          <i class="icon-trash icon-white"></i>
-          Delete this user
-        </button>
-      [% END %]
-    </div>
-
-  </fieldset>
+  <button id="submit-user" class="btn btn-primary">
+    <i class="icon-ok icon-white"></i>
+    [%IF create %]Create[% ELSE %]Apply changes[% END %]
+  </button>
+  [% IF !create && c.check_user_roles('admin') && user.type == 'hydra' %]
+    <button id="reset-password" class="btn btn-warning">
+      <i class="icon-trash icon-white"></i>
+      Reset password
+    </button>
+  [% END %]
+  [% IF !create %]
+    <button id="delete-user" class="btn btn-danger">
+      <i class="icon-trash icon-white"></i>
+      Delete this user
+    </button>
+  [% END %]
 
 </form>
 
diff --git a/src/root/users.tt b/src/root/users.tt
index 45f5e5e72..6d7fcc7ad 100644
--- a/src/root/users.tt
+++ b/src/root/users.tt
@@ -24,8 +24,8 @@
   </tbody>
 </table>
 
-<p><a class="btn" href="[% c.uri_for(c.controller('Root').action_for('register')) %]">
+<a class="btn btn-primary" href="[% c.uri_for(c.controller('Root').action_for('register')) %]">
   <i class="icon-plus"></i> Add a new user
-</a></p>
+</a>
 
 [% END %]